自定义input type=”radio”样式
程序员文章站
2022-07-13 16:51:45
...
html:
<input type="radio" name="sex" value="man" id="man" checked>
<label for="man">男</label>
<input type="radio" name="sex" value="female" id="female">
<label for="female">女</label>
css:
label{
position: relative;
top: 14px;
font-size: 16px;
color: #B7BABB;
line-height: 16px;
}
input[type="radio"]{
display: none;
}
input[type='radio']+label:before{
margin-top: -2px;
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-right: 6px;
border-radius: 100%;
vertical-align: middle;
border: 1px solid #E4E4E4;
background: #FFFFFF;
}
input[type='radio']:checked+label:before{
background-image: url('../images/s_true.png');
background-position: center center;
/*background: #777777;*/
}
结果:
上一篇: 外贸管理软件-分享神卓外贸软件的工作事项安排日历表特效
下一篇: OSGi Bundle解析源码分析