Css实现checkbox及radio样式自定义

 

1.设置input 属性hidden对该input进行隐藏，或者通过display:none也可以

2. 借助label for标签通过id绑定input ，这样在点击label时实际就是点击了input

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
<label for="adviceRadio1" class="advice"></label>

 

.advice{
   height: 12px;
   width: 12px;
   display: inline-block;
   background-image: url('../img/icon-unchecked.png');
   background-repeat: no-repeat;
   background-position: center;
   vertical-align: middle;
   margin-top: -4px;
}
input[type="radio"]:checked + .advice{
  background-image: url('../img/icon-checked.png'); 
}

checkbox 类似，处理将type换成 checkbox 

 

还有一种 checkbox 样式处理

/**
* <input type="checkbox" class="checkbox">
*不兼容IE
*/
input[type="checkbox"].checkbox {
    -webkit-appearance: none;  appearance CSS3属性 使元素看上去像标准的用户界面元素，改变任何元素的浏览器默认风格。“webkit” 和 火狐支持
    -moz-appearance: none;
    appearance: none;
    background: #fff url("../img/icon_unchecked.png") no-repeat;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    outline: none; /*去掉自带的边框*/
}
input[type="checkbox"].checkbox:checked {
    background: url("../img/icon_checked.png") no-repeat;
}
input[type="checkbox"]:focus{
    border: 0;
}

 

 

第三种

 <input type="radio" id="radio1"> <label for="radio1"></label>
 <input type="radio" id="radio2"> <label for="radio2"></label>

 <input type="checkbox" id="checkbox1"> <label for="checkbox1"></label>
 <input type="checkbox" id="checkbox2"> <label for="checkbox2"></label>

 

 input[type="radio"] + label::before {
            content: "\a0";
            display: inline-block;
            vertical-align: middle;
            box-sizing: border-box;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            text-indent: 1px;
            margin-bottom: 2px;
            margin-right: 2px;
            border: 1px solid #bfbfbf;
        }
        input[type="radio"]:checked + label::before {
            background-color: #19abff;
            border-color: #19abff;
            background-clip: content-box;  /*背景绘制在内容方框内*/
            padding: 2px;
        }
        input[type="radio"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }


        input[type="checkbox"] + label::before {
            content: "\a0";  /*不换行空格*/
            display: inline-block;
            width: .8em;
            height: .8em;
            margin-right: .2em;
            border:#CCCCCC 2px solid;
            border-radius: .2em;
            background-color: #FFFFFF;
            text-indent: .15em;
            line-height: .65;  /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/
        }
        input[type="checkbox"]:checked + label::before {
            content: "\2713";/*\2714*/
            background-color: #FFFFFF;
            border:#19abff 2px solid;
            color: #19abff;
        }
        input[type="checkbox"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }

 

 checkbox没有readOnly属性，如果使用disabled=“disabled”属性的话，会让checkbox变成灰色 ，或者 设置它的οnclick="return false"