radio,checkbox选中样式优化

问题：radio,checkbox默认的样式不满足需求，需要修改选中的样式

思路：

利用label的特点：点击label，浏览器会自动将焦点转移到其附加的表单控件 

隐藏radio(checkbox),设置未选中label样式，设置选中时label的样式.

 

注意：

1.当两个radio都可以选中，而你想要实现单选时。请查看radio的name命名是否一致。同一组的单选按钮，name 取值一定要一致！！

2.当你发现点击标签，但是样式并没有生效，请查看是否把label附加到复选框上。label的for和input的id必须值匹配，这样点击标签才能实现切换checkbox的效果。

举例：

html

 <label class="radio-inline">
       <input autocomplete="off" type="radio" name="radio" id="color-input-orange" >
       <label for="color-input-orange"></label>
       <span>radio 1</span>
 </label>
 <label class="radio-inline">
        <input autocomplete="off" type="radio" name="radio" id="color-input-orange" >
        <label for="color-input-orange"></label>
        <span>radio 2 </span>
</label>

css

//隐藏radio，设置透明度为0.
input[type="radio"] {
    opacity: 0;
}
//设置label的未选中样式以及位置
input[type="radio"] + label {
    content: "";
    background-color: #ffffff;
    float: left;
    margin-top: 3px;
    margin-left: -21px;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    border: 1px solid #ff6e3c;
}
//设置label选中样式
input[type="radio"]:checked + label {
    padding: 2px;
    box-sizing: border-box;
    background-color: #ff6e3c;
    background-clip: content-box;
}

实现效果：

 html

<div class="form-content " style="line-height: 18px;">
   <input class="color-checkbox-orange" type="checkbox" id="color-checkbox-orange" >
   <label for="color-checkbox-orange"> </label >
   <span> I accept the <a>term & condition</a></span>
</div>

css

.color-checkbox-orange {
    opacity: 0;
}
/*lable标签的大小、位置、背景颜色更改*/
.color-checkbox-orange + label {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid #666666;
    background: #ffffff;
    margin-bottom: 3px;
    margin-right: 3px;
    vertical-align: middle;
}
.color-checkbox-orange:checked + label {
    background: #ff6e3c;
    background-image: url("/images/icon_checkboxed.png");
    border: 0;
}

实现效果