html radio 样式重写

为什么80%的码农都做不了架构师？>>>   

css

/* start radio 样式重写*/
.radio {
    display: inline-block;
    position: relative;
    width: 67px;
}

.radio input[type="radio"] {
    position: absolute;
    width: 0;
    height: 0;
}

input[type="radio"]:after {
    content:'';
    background-image: url(/img/archive/radio.png);
    background-size:20px 20px;
    width:20px;
    height:20px;
    position: absolute;
    z-index: 100;
    left: 30px;
    top: -4px;
}

input[type="radio"]:checked:after {
    background-image: url(/img/archive/radioActive.png);
    background-size:18px 18px;
    width:18px;
    height:18px;
}

/* radio 样式重写 end */

html

<div class="ip-group ">
    <label>性别:</label>
    <label class="radio" >男<input name="gender" type="radio" value="0" required></label>
    <label class="radio" >女<input name="gender" type="radio" value="1" required></label>
</div>

页面效果:

背景图片

 

 

转载于:https://my.oschina.net/lemos/blog/3006914