The original frame elements are hidden away, replaced by a defined his style according to label, as follows:
[type="radio"]:not(:checked)+label {
padding-left: 26px;
height: 25px;
line-height: 25px;
font-size: 13px;
font-weight: normal;
}
[type="radio"]:checked+label {
padding-left: 26px;
height: 25px;
line-height: 25px;
font-size: 13px;
font-weight: normal;
}
[type="radio"].radio-col-red:checked+label:after {
background-color: #F44336;
border-color: #F44336;
}
From the foregoing, css + sign indicates that the following elements siblings, so the correct way is open:
Define a label element in the form elements can be friends
such as:
<input type="radio" name="xx" class="radio-col-light-blue" id="xx" value="1" >
<label for="xx">AAA</label>
No way, with someone else's framework, you have to be bound by, the following link to speak a little more detail
Reference: https://www.cnblogs.com/hpnet/p/9350250.html