干货分享（css checkbox样式美化）checkbox改变样式，html中checkbox与radio样式美化的简单实例，html中checkbox与radio样式美化的简单实例，
html元素中checkbox与radio元素的样式在每个浏览器中显示的效果是不同的，为了统一它们在各个品牌浏览器中的显示样式，我们可以对它们做个简单的美化。
html checkbox 元素美化实例：
使用纯CSS代码就可以实现 checkbox 元素的美化，只需要隐藏掉 checkbox 选择元素，并使用css中的相邻兄弟选择器，来控制他的下一个兄弟元素即可！
示例代码：
<style>
label{
font-size: 14px;
height: 25px;
line-height: 25px;
box-sizing: border-box;
margin-right: 20px;
}
input[type="checkbox"]
{
display: none;
}
/*定义 checkbox 元素相邻元素 span 样式*/
input[type="checkbox"] + span
{
display: inline-block;
position: relative;
border: 1px solid #99a1a7;
width: 15px;
height: 15px;
line-height: 15px;
border-radius: 4px;
overflow: hidden;
box-sizing: border-box;
margin: 0 5px 0 0;
}
/*定义 checkbox 元素相邻元素 span 样式伪类的样式*/
input[type="checkbox"]:checked + span:after
{
content: \2714; /*如果想更好看一点，这里可以使用一亲图片或字体标等来美化一下选择效果*/
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
font-size: 14px;
color: green;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
}
</style>
<label>
<input type="checkbox" name="" id="">
<span></span>墨初
</label>
<label>
<input type="checkbox" name="" id="">
<span></span>飞鸟慕鱼博客
</label>复制
html radio 元素美化实例：
美化 radio 元素与美化 checkbox 元素没有太大的区别，其原理都是利用了CSS中的相邻兄弟元素选择器，不同的是元素选中后的样式区别！
示例代码：
<style>
label{
font-size: 14px;
height: 25px;
line-height: 25px;
box-sizing: border-box;
margin-right: 20px;
}
input[type="radio"]
{
display: none;
}
/*定义 radio 元素相邻元素 span 样式*/
input[type="radio"] + span
{
display: inline-block;
position: relative;
border: 1px solid #99a1a7;
width: 15px;
height: 15px;
line-height: 15px;
border-radius: 50%;
overflow: hidden;
box-sizing: border-box;
margin: 0 5px 0 0;
}
/*定义 radio 元素相邻元素 span 样式伪类的样式*/
input[type="radio"]:checked + span{
border:1px solid green;
}
input[type="radio"]:checked + span:after
{
content: ;
box-sizing: border-box;
position: absolute;
left: 2px;
top: 2px;
width: 9px;
height: 9px;
background-color: green;
border-radius: 50%;
}
</style>
<label>
<input type="radio" name="host" >
<span></span>墨初
</label>
<label>
<input type="radio" name="host" >
<span></span>飞鸟慕鱼博客
</label>复制
本文链接：http://blog.sauo.top/?id=317 感谢分享!
