为什么每次都要在重写样式呢？我们记录一下radio
radio 的样式改写问题
解决方法：
1. 改写样式吧选中的颜色变为图片替换
https://www.haorooms.com/post/css_mh_ck_radio
2.将原来的radio的样式覆盖，生成一个伪类元素，修改其伪类元素的样式
https://www.cnblogs.com/xinjie-just/p/5911086.html
样式重写
// radio
// radio
页面
<div class="female">
<input type="radio" id="female" name="sex" />
<label for="female">女</label>
</div>
<div class="male">
<input type="radio" id="male" name="sex" />
<label for="male">男</label>
</div>
input[type="radio"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 19pt;
height: 19pt;
margin-right: .4em;
border-radius: 50%;
border: 1px solid #dddddd;
text-indent: .15em;
line-height: 1;
}
input[type="radio"]:checked + label::before {
background-color: #22ac38;
background-clip: content-box;
padding: .2em;
}
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
用图片代替的方式
页面的样式
<input class=" tongguoBtn1" ng-model="checkCustomerPass.result" value="通过" checked type="radio" id="tongguo"
name="radio"/><label for="tongguo" class="gongguoF"> 通过 </label>
csss
.tongguoBtn1{
width: 16px !important;
height: 16px!important;
line-height: 16px!important;
position: absolute;
top: 7px;
left:75px;
z-index: -1;
margin:0px 10px -10px 0!important;
//background-color: #eeeeee;
border: solid 1px #b5b5b5;
background-color: #22ac38;
}
.tongguoBtn1[type="radio"]:checked+label {
width: 80px;
//position: absolute;
display: inline-block;
margin: 5px 0;
//top:216px;
//left: 89px;
padding:0 0 0 20px;
background: url("../images/xiaoxi1.png")no-repeat left top;
}
.gongguoF{
color: #333333;
margin: 0 10px 0 10px ;
}