如何修改input中[type="radio"]和[type="checkbox"]的样式

一、利用css3伪元素实现样式修改

思路：

1. 可以为<label>元素添加生成性内容(伪元素)，并基于复选框的状态来为其设置样式；

2. 然后把真正的复选框隐藏起来；

3. 最后把生成内容美化一下。

解决方法：

美化checkbox

1. 一段简单的结构代码：

<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>

 

2. 生成一个伪元素，作为美化版的复选框，先给伪元素添加一些样式：

input[type="checkbox"] + label::before {
    content: "\a0";  /*不换行空格*/
    display: inline-block;
    vertical-align: .2em;
    width: .8em;
    height: .8em;
    margin-right: .2em;
    border-radius: .2em;
    background-color: silver;
    text-indent: .15em;
    line-height: .65;  /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/
}

3. 给复选框的勾选状态添加不同的样式：

input[type="checkbox"]:checked + label::before {
    content: "\2713";
    background-color: yellowgreen;
}

4. 现在把原来的复选框隐藏：

input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

隐藏原来的复选框时，如果使用 display: none; 的话，那样会把它从键盘 tab 键切换焦点的队列中完全删除。
于是可采用剪切的方式，让剪切后的尺寸为零，这样就隐藏了原来的多选框。

5. 延伸

在聚焦和禁用时改变它的样式：

input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 .1em .1em #58a;
}
input[type="checkbox"]:disabled + label::before {
    background-color: gray;
    box-shadow: none;
    color: #555;
}

效果：

美化radio

html代码：

 <p>您的性别：</p>
    <div class="radio-sex">
        <input type="radio" id="sex1" name="sex">
        <label for="sex1"></label>
        <span>男</span>
    </div>
    <div class="radio-sex">
        <input type="radio" id="sex2" name="sex">
        <label for="sex2"></label> 女
    </div>

 css样式：

.radio-sex {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.radio-sex input {
    vertical-align: middle;
    margin-top: -2px;
    margin-bottom: 1px;
    /* 前面三行代码是为了让radio单选按钮与文字对齐 */
    width: 20px;
    height: 20px;
    appearance: none;/*清楚默认样式*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    /* 注意不能设置为display:none*/
}

.radio-sex label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    /*注意层级关系，如果不把label层级设为最低，会遮挡住input而不能单选*/
    width: 20px;
    height: 20px;
    border: 1px solid #3582E9;
    border-radius: 100%;
}

.radio-sex input:checked+label {
    background: #3582E9;
}

.radio-sex input:checked+label::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 2px;
    width: 5px;
    height: 12px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
}

效果：

总结：

优点：充分借助了CSS3的优势，无需使用js和图片，仅用纯CSS3就可搞定

缺点：兼容性较差，仅支持IE9+

二、利用图片实现样式修改（radio）

radio样式二：

思路

1.设置input 属性hidden对该input进行隐藏

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>

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

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

 3.定义label的样式，设置未选中状态的背景图

.advice{
    height: 12px;
    width: 12px;
    display: inline-block;
    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-top: -4px;                 
}

4.使用相邻选择器设置选中状态label的样式 

input[type="radio"]:checked + .advice{
                    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
                }

三、利用插件实现

awesome-bootstrap-checkbox插件

awesome-bootstrap-checkbox是一款可以美化Bootstrap复选框和单选按钮的插件。它使用纯CSS编写，没有任何的javascript文件。它通过在原生Bootstrap组件的基础上做一些小改动，即可完成漂亮的美化效果。

演示地址：http://awesome-bootstrap-chec...
插件下载：https://www.bootcdn.cn/awesom...
注：需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件

pretty.css

pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用，对原生的checkbox和radio进行美化，还可以制作按钮点击时的动画效果。

演示地址：http://www.htmleaf.com/Demo/2...
插件下载：https://www.bootcdn.cn/pretty...