更改layui默认单选框radio样式更改后效果展⽰：
html：
<div class="container">
<form class="layui-form" action="">
<h2>⾃定义样式</h2>
<div class="layui-form-item">
<div class="layui-form-label">单选框</div>
<div class="layui-input-block">
<input class="radio" type="radio" name="gender" value="male" title="男" checked>
<input type="radio" name="gender" value="female" title="⼥">
</div>
</div>
</form>
</div>
css：
.layui-form-radio i {
top: 0;
width: 16px;
height: 16px;
line-height: 16px;
border: 1px solid #d2d2d2;
font-size: 12px;
border-radius: 2px;
background-color: #fff;
color: #fff !important;
}
.layui-form-radioed i {
position: relative;
width: 18px;
height: 18px;
border-style: solid;
background-color: #6A8BF5;
color: #6A8BF5 !important;
}
/* 使⽤伪类画选中的对号 */
.layui-form-radioed i::after, .layui-form-radioed i::before {  content: "";
position: absolute;
top: 8px;
left: 5px;
display: block;
width: 12px;
height: 2px;
html radio点击变颜border-radius: 4px;
background-color: #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.layui-form-radioed i::before {
position: absolute;
top: 10px;
left: 2px;
width: 7px;
transform: rotate(-135deg);
}

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