为什么每次都要在重写样式呢？我们记录一下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">&nbsp;&nbsp; 通过&nbsp;</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 ;

}