What I want is that when one radio button
is not selected, its border changes color to a reddish one so that it is clearly identified, I have already been able to modify the radius initially, but not when an action is applied.
input[type="radio"] {
display: none;
}
input[type="radio"] + span {
background-color: #fefefe;
border: 1px solid;
border-color: blue;
border-radius: 50px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
display: inline-block;
float: left;
margin-right: 7px;
padding: 7px;
position: relative;
-webkit-appearance: none;
cursor:pointer;
}
input[type="radio"]:checked + span {
color: #f00;
}
input[type="radio"]:checked + span:after {
background: blue;
border-radius: 50px;
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.75), inset -1px -1px 1px rgba(0, 0, 0, 0.75);
content: " ";
height: 10px;
left: 2px;
position: absolute;
top: 2px;
width: 10px;
}
label:hover input[type="radio"] + span {
border-color: green;
}
.error_borde {
border-color: red;
}
<div class="left width50">
<label>Tipo Sistema:</label><font size="4"> * </font><br />
<label><input type="radio" name="tipoSistemaP" class="radios" id="rbtRadioR" value="1" /><span></span>Remesa</label>
<label style="float:right;margin-right:80px;"> <input type="radio" name="tipoSistemaP" class="radios" id="rbtRadioPe" value="2" /><span></span>Pedimento Pagado</label>
</div>
Border change code:
$("#rbtRadioR").addClass('error_borde');
Note: The action must be executed when clicking the save button
You don't need to use js for this. Simply set the border-color to red by default, and override the color to blue when the pseudo-property is met
:checked
.Using your own code (and again, with the caveat that this example only works for webkit)
You can create a custom radio from a container that holds the input and a label that references it. Then, using
after
you can simulate the point that indicates selection.To make the radio be selected from a button, just do one of two things:
click
checked
totrue
.Example
The error:
By applying the class
error_borde
, the rule is only styling theinput
and not modifying thespan
, which is the element with the blue border.Solution:
Create a rule that affects the
span
adjacent sibling of theinput radio
classyerror_borde
.Example: