**使用css样式模拟单选框radio的功能** ### **HTML代码：** ~~~ <div class="address"> <form> <ul> <li class="top-after"> <label>联系人</label> <input type="text" /> </li> <li class="top-after"> <input type="radio" name="sex" checked="checked" /> <span class="sex">先生</span> <input type="radio" name="sex" /> <span class="sex">女士</span> </li> <li class="top-after"> <label>手机号</label> <input type="text" /> </li> <li class="top-after"> <label>收货地址</label> <input type="text" /> </li> </ul> </form> </div> <div class="save"> <input class="save-button" type="button" value="保存"> </div> ~~~ ### **css代码：** ~~~ body { background: #f0eff5; } .address { width: 100%; margin-top: 10px; background: #fff; } .address li { width: 90%; height: 48px; margin-left: 20px; } .address label { display: inline-block; width: 70px; height: 48px; line-height: 48px; color: #4b4b4b; z-index: 10; } .sex { /*display: inline-block;*/ width: 30px; height: 48px; margin-left: 90px; line-height: 48px; } .address input[type="radio"] { display: inline; border: none; position: absolute; top: 50%; margin-top: -8px; margin-left: 70px; content: ""; width: 16px; height: 16px; background: url(../../img/no.png) no-repeat center / 16px 16px; } .address input[type="radio"]:checked { content: ""; background: url(../../img/yes.png) no-repeat center / 16px 16px; } .address ul li input[type="text"] { width: 70%; height: 48px; z-index: 8; border: none; } /*保存按钮*/ .save { width: 100%; } .save input[type="button"], .save-button { width: 90%; height: 48px; margin: 30px 5%; font-size: 16px; background: #ffdc44; border: 1px solid #000; border-radius: 10px; } .save input[type="button"]:active { background: #ffdc44; color: #000; } ~~~ ### **出现的bug还有解决方案** #### 我碰到的问题就是在移动端，radio默认的样式还在，就是默认的框还存在。 解决方案： 在css里面加一句border:none ;取消radio默认的边框！ ~~~ border: none; ~~~