Let’s look at the effect picture first: the radio is selected by default in blue, how to achieve red...
html code:
<div class="sigupC-t">
<label class="bui-radios-label bui-radios-anim">
<input type="radio" checked name="all" value="1" /><i class="bui-radios"></i>
<div>全部</div>
</label>
<label class="bui-radios-label bui-radios-anim lable-right">
<input type="radio" name="all" value="2" /><i class="bui-radios"></i>
<div>可报名</div>
</label>
<label class="bui-radios-label bui-radios-anim lable-right">
<input type="radio" name="all" value="3" /><i class="bui-radios"></i>
<div>不可报名</div>
</label>
</div>
CSS code:
label{
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
margin-right: 12px;
}
div{
font-size: 11px;
color: #666E79;
margin-left: 6px;
}
/*隐藏input*/
label.bui-radios-label input[type="radio"] {
width: 100px;
position: absolute;
opacity: 0;
visibility: hidden;
-webkit-appearance: none;
}
/*自定义radio*/
label.bui-radios-label .bui-radios {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
background-color: #fff;
border: 1px solid #979797;
border-radius: 50%;
vertical-align: -0.267vw;
}
/*单选框选中后,自定义radio的样式*/
label.bui-radios-label input[type="radio"]:checked+.bui-radios:after {
position: absolute;
content: "";
width: 6px;
height: 6px;
background-color: #B4222D;
border-radius: 50%;
top: 2px;
left: 2px;
}
label.bui-radios-label input[type="radio"]:checked+.bui-radios {
background-color: #fff;
border: 1px solid #B4222D;
}
label.bui-radios-label input[type="radio"]:disabled:checked+.bui-radios:after {
background-color: #c1c1c1;
}
/*自定义radio的过渡效果*/
label.bui-radios-label.bui-radios-anim .bui-radios {
-webkit-transition: background-color ease-out 0.5s;
transition: background-color ease-out 0.5s;
}
js listens to which one is selected
Remember to introduce jquery first
$("input[type=radio]").change(function(){
console.log( $(this).val());
})