自定义html单选多选选中图标

众所周知，表单中的一写元素原生样式不是很好看，项目中用到的时候需要优化，今天我就写一下单选按钮很多选按钮的样式的优化，首先自己要做出按钮选中之前的图片和按钮选中之后的图片。然后就是代码了。

HTML代码结构如下：

男

女

css代码如下：

label { /设置label的样式/
width: 100%;
padding: 10px 0px;
display: block;
line-height: 20px;
position: relative;
font-weight: normal;
}
.radio .option { /把优化后的按钮图片设置为该div的背景图片，把该div定位到原生样式的上方，遮盖住原生样式。/
width: 25px;
height: 25px;
position: absolute;
top: 10px;
left: 0px;
background-size: cover;
background: url(img/radio.png) no-repeat;
background-size: cover;
}
.radio input[type=“radio”] { /为了保险起见，把原生样式隐藏掉/
display: inline-block ;
margin-right: 15px ;
opacity: 0 ;
}
input[type=“radio”]:checked+div { /当radiuo被选中时，把input下边的div标签的背景图片替换掉/
background: url(img/radio-checked.png) no-repeat;
background-size: cover;
}