项目上经常需要自定义样式的单选(复选)框,然后做过又老是忘,就在这儿记录下吧。
html结构
<div class="sex">
<div>
<input type="radio" id="female" name="sex">
<label for="female">男</label>
</div>
<div>
<input type="radio" id="male" name="sex">
<label for="male">女</label>
</div>
</div>
css样式
.sex {
margin-top: 20px;
height: 18px;
padding-left: 116px;
}
.sex div {
display: inline-block;
width: 42px;
margin-right: 34px;
position: relative;
}
.sex div label {
position: relative;
color: #333;
font-size: 13px;
cursor: pointer;
font-weight: normal;
margin-bottom: 0;
}
.sex div input[type="radio"] {
display: none;
}
.sex div input[type="radio"] + label::before {
margin-top: -4px;
content: '';
display: inline-block;
width: 15px;
height: 15px;
margin-right: 7px;
vertical-align: middle;
box-sizing: border-box;
background-image: url("1.png");
}
.sex div input[type='radio']:checked+label:before{
background-image: url("2.png");
background-position: center center;
}
第一篇博客,以后要多更新记录寄几的开发点滴~