radio單選按鈕默認(rèn)樣式改變,radio默認(rèn)樣式確實有點丑,而且不能適合所有的UI設(shè)計稿,現(xiàn)在UI稿的花樣是越來越多了,所有使用css自定義radio單選按鈕樣式還是很重要的.
單選按鈕最常見的地方就是性別的選擇,這里以此為例,html代碼如下:
<form action="" class="formSex">
<span>性別：</span>
<input type="radio" name="sex" id="male" class="sex formInput">
<label for="male">男</label>
<input type="radio" name="sex" id="female" class="sex formInput">
<label for="female">女</label>
<input type="radio" name="sex" id="secret" checked class="sex formInput">
<label for="secret">保密</label>
</form>
css改變radio按鈕樣式,這里使用了偽類(在css中一定要擅用偽類,能更好的實現(xiàn)功能):
.formSex input{
display: none;
margin-top: 10px;
}
.formSex label{
box-sizing: border-box;
position: relative;
margin-right: 34px;
margin-top: 10px;
}
.formSex label::before{
display: inline-block;
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid rgb(219, 219, 219);
margin-right: 6px;
vertical-align: bottom;
}
.formSex input:checked+label::before{
border: 1px solid #fff;
background-color: #fff;
}
.formSex input:checked+label::after{
display: inline-block;
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
position: absolute;
left: 0;
bottom: 0;
background-color: #F60;
}
在不使用js的情況下就改變了radio的按鈕樣式了,既然是自定義樣式,就可以隨心情自己修改了,我這里實現(xiàn)的效果是這樣的
image.png
