表单input控件的单选框【radio】、复选框【checkbox】类型的样式美化

一、单选框默认样式的修改

1、效果

2、结构代码

   

        

            
            满意
        

        

            
            不满意
        
    

3、css样式代码

.tl_sqxq {
  color: #333;
  font-size: 0.4rem;
  margin-top: 0.53333333rem;
  overflow: hidden;
}
.tl_sqxq span {
  float: left;
}
.tl_sqxq p,
.tl_sqxq .tl_img {
  float: left;
  width: 6.72rem;
}
.tl_sqxq .tl_img img {
  width: 100%;
}
.tl_sqxq .tl_input {
  line-height: 0.53333333rem;
  float: left;
  margin-right: 1.33333333rem;
}
.tl_sqxq .tl_input input {
  width: 0.53333333rem;
  height: 0.53333333rem;
  line-height: 0.53333333rem;
}

4、下面是修改单选框默认样式的CSS代码（修改默认样式的关键样式）

/*未选中状态*/ 
input[type="radio"] {
  background: url(../images/zan_nor.png); /*背景图路径*/
  background-size: contain;
  vertical-align: middle;
  -webkit-appearance: none;
}
/*选中状态*/
input[type="radio"]:checked {
  background: url(../images/zan.png);/*背景图路径*/
  background-size: contain;
}

---

二、复选框默认样式的修改

1、效果

2、结构代码（与单选框类是，只是将type类型改为type="checkbox"）

   

        

            
            苹果
        

        

            
            雪梨
        
        

            
            桃子
        
    

3、css样式代码

.tl_sqxq {
  color: #333;
  font-size: 0.4rem;
  margin-top: 0.53333333rem;
  overflow: hidden;
}
.tl_sqxq span {
  float: left;
}
.tl_sqxq p,
.tl_sqxq .tl_img {
  float: left;
  width: 6.72rem;
}
.tl_sqxq .tl_img img {
  width: 100%;
}
.tl_sqxq .tl_input {
  line-height: 0.53333333rem;
  float: left;
  margin-right: 1.33333333rem;
}
.tl_sqxq .tl_input input {
  width: 0.53333333rem;
  height: 0.53333333rem;
  line-height: 0.53333333rem;
}

4、下面是修改复选框默认样式的CSS代码（修改默认样式的关键样式）

注：方法与单选框的一样，只是将type类型改为：input[type="checkbox"]

.tl_sqxq .tl_input input[type="checkbox"] {
  background: url(images/zan_nor.png);/*背景图路径*/
  background-size: contain;
  vertical-align: middle;
  -webkit-appearance: none;
}
.tl_sqxq .tl_input input[type="checkbox"]:checked {
  background: url(images/zan.png);/*背景图路径*/
  background-size: contain;
}