html5 checkbox 样式,纯CSS改写radio和checkbox，单选框、复选框样式优化

input 的单选框 radio 和复选框 checkbox 是样式是很难调的，设置背景和边框都不起效。

我们可以使用下面的方法进行样式美化：纯CSS就能实现。

HTML：

你喜欢我吗？

喜欢

非常喜欢

CSS： 将单选框或者复选框隐藏，在其后面写一个 span 利用 CSS 的相邻兄弟选择器  input + span 选中它，对它的样式进行美化。

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;

}

大功告成！如下图所示：

单选框也一样，只需要给 span 加一个圆角就可以啦！label input[type="radio"]+span{ border-radius:50%; }