CSS设置单选按钮选中样式本篇博客介绍如何在单选按钮选中时更改被选中的单选按钮样式
html代码：
<div class="div_radio">
<div class="div_radio_left">
<input type="radio" name="sexradio" checked="checked" value="1" id="radio-1" />
<label for="radio-1" class="radio-label">男</label>
</div>
<div calss="div_radio_right">
<input type="radio" name="sexradio" value="0" id="radio-2">
<label for="radio-2" class="radio-label" >⼥</label>
</div>
</div>
CSS代码：
<style type="text/css">
.div_radio_left {
float: left;
text-align: left;
width: 50%;
}
.div_radio_right {
float: left;
text-align: right;
}
input[type="radio"] {
position: absolute; /*绝对定位*/
clip: rect(0,0,0,0); /*裁剪图像*/
}
.div_radio label {
display: inline-flex; /*将对象作为内联块级弹性伸缩盒显⽰*/
flex-direction: row; /*主轴为⽔平⽅向，起点在左端*/
align-items: center; /*垂直居中*/
}
/*紧邻lable标签的单选按钮创建伪元素*/
html radio点击变颜
input[type="radio"] + label::before {
content: ''; /*插⼊内容为空*/
display: inline-block; /*融合⾏内于块级*/
width: 10px;
height: 10px;
border-radius: 10px; /*设置圆⾓*/
border: 1px solid #666666;
margin-right: 3px;
}
/*紧邻lable标签选中的单选按钮创建伪元素*/
input[type="radio"]:checked + label::before {
background-clip: content-box; /*背景裁剪到内容框*/
background-color: #BB1E19;
width: 6px;
height: 6px;
padding: 2px;
border: 1px solid #BB1E19;
}
</style>
JS代码：
<script type="text/javascript">
$(function () {
/
/点击单选按钮
$(":input[name='sexradio']").click(function () {
if (Number($(this).val()) == 1) {
$(this).parent().parent().find("div").eq(0).find("label").eq(0).css("color", "#BB1E19");
$(this).parent().parent().find("div").eq(1).find("label").eq(0).css("color", "#666666");
}
else {
$(this).parent().parent().find("div").eq(1).find("label").eq(0).css("color", "#BB1E19");
$(this).parent().parent().find("div").eq(0).find("label").eq(0).css("color", "#666666");
}
})
})
</script>
效果图：End！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。