input
的单选框 radio
和复选框 checkbox
是样式是很难调的,设置背景和边框都不起效。
我们可以使用下面的方法进行样式美化:纯CSS就能实现。
HTML:
<h1>你喜欢我吗?</h1>
<label for="check1">
<input type="checkbox" name="chk" id="check1"><span><span></span></span>喜欢
</label>
<label for="check2">
<input type="checkbox" name="chk" id="check2"><span><span></span></span>非常喜欢
</label>
CSS: 将单选框或者复选框隐藏,在其后面写一个 span
利用 CSS 的相邻兄弟选择器 input + span
选中它,对它的样式进行美化。
<style>
label{
display: inline-block;
width: 100px;
text-align: left;
line-height: 26px;
}
label input[type="checkbox"]{
display: none;
}
label input[type="checkbox"]+span{
box-sizing: border-box;
display: inline-block;
width: 20px;
height: 20px;
padding: 2px;
border: 2px solid #ccc;
vertical-align: sub;
margin-right: 5px;
}
label input[type="checkbox"]+span>span{
display: inline-block;
width: 12px;
height: 12px;
float: left;
background: #33bb00;
opacity: 0;
}
label input[type="checkbox"]:checked+span{
border-color: #33bb00;
}
label:hover input[type="checkbox"]+span>span{
opacity: 0.5;
}
label input[type="checkbox"]:checked+span>span{
opacity: 1;
}
</style>
大功告成!如下图所示:
单选框也一样,只需要给 span
加一个圆角就可以啦!
label input[type="radio"]+span{ border-radius:50%; }
声明:本文由w3h5原创,转载请注明出处:《纯CSS改写radio和checkbox,单选框、复选框样式优化》 https://cloud.tencent.com/developer/article/1537990