html 单选框设置图片,css样式~~用图片模拟单选框radio的功能

**使用css样式模拟单选框radio的功能**

### **HTML代码：**

~~~

• 联系人

• 先生

  女士

• 手机号

• 收货地址

~~~

### **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;

~~~