三种方法（css3，js，jq）实现表单元件样式-原创手记-慕课网

html原生的checkbox，radio样式非常单一朴素，为了实现理想的样式，我们可以用css3，js，jQuery，具体如下：
1.使用css3伪元素及伪类
首先明确伪类与伪元素的概念：

CSS 伪类 (Pseudo-classes)：CSS 伪类用于向某些选择器添加特殊的效果

常见伪类有：（link，visited，hover，active；first-child；lang）
CSS 伪元素 (Pseudo-elements)：CSS 伪元素用于向某些选择器设置特殊效果。

常见伪元素有：（first-line，first-letter，before，after）
语法
伪类的语法：
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
伪元素的语法：
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用：
selector.class:pseudo-element {property:value;}

伪元素和伪类有很多相似的地方，但区别还是存在的，总结如下

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes
::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

好了，言归正传，具体实现html代码如下

<div class="content">
    <div class="demo1">
        <h1>radio-使用CSS3</h1>
        <input class='radio' type="radio" name="demo1" id="demo11" checked="checked">
        <label for="demo11"></label>
        <input class='radio' type="radio" name="demo1" id="demo12" checked="">
        <label for="demo12"></label>
        <input class='radio' type="radio" name="demo1" id="demo13" checked="">
        <label for="demo13"></label>

        <input class='checkbox' type="checkbox" name="check1" value="check1" id="check1">
        <label for="check1"></label>
        <input class='checkbox' type="checkbox" name="check1" value="check2" id="check2">
        <label for="check2"></label>

        <label>
            <input class='test-radio' type="radio" name='test' checked="checked">
            <span></span>
        </label>
        <label>
            <input class='test-radio' type="radio" name='test' checked="">
            <span></span>
        </label>
        <label>
            <input class='test-radio' type="radio" name='test' checked="">
            <span></span>
        </label>
        <label>
            <input class='test-checkbox' type="checkbox" name='test' checked="checked">
            <span></span>
        </label> 
        <label>
            <input class='test-checkbox' type="checkbox" name='test' checked="">
            <span></span>
        </label>

    </div>
    <div class="demo2">
        <h1>radio-使用js+img</h1>
        <span class="demospan on">
            <input type="radio" name="demo2" id="demo21" checked="checked" class="demo21">
        </span>
        <label for="demo21"></label>
        <span class="demospan">
            <input type="radio" name="demo2" id="demo22"  class="demo21">
        </span>
        <label for="demo22"></label>    
        <span class="demospan">
            <input type="radio" name="demo2" id="demo23" class="demo21">
        </span>
        <label for="demo23"></label>    
        <span class="piaochecked on_check">
            <input type="checkbox" name="check2" value="check1" id="check3" class="cbdemo2">    
        </span>
        <label for="check3"></label>
        <span class="piaochecked">
            <input type="checkbox" name="check2" value="check2" id="check4" class="cbdemo2">    
        </span>
        <label for="check4"></label>
    </div>                      
</div>      
</div>

css代码如下

.radio,.checkbox,.test-radio,.test-checkbox{display: none;}
         label{/*初始化label标签*/
            position: relative;
            display: inline-block;
            font-size: 20px;
            cursor: pointer;
            margin-left:50px;
        }
        .radio+label::before{/*单选和其兄弟元素的初始伪元素设置*/
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: red;
            border-radius:10px;
        }
        .checkbox+label::before{/*复选和其兄弟元素的初始伪元素设置*/
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: red;
            border-radius:10px;
            border-radius:3px;
        }
        .test-radio+span::before{/*单选和其兄弟元素的初始伪元素设置*/
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: blue;
            border-radius:10px;
        }
        .test-radio:checked+span::before{/*单选的伪类为checked时，其兄弟元素span的初始伪元素设置*/
            content: "\2022";
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 16px;
        }
        .test-checkbox+span::before{/*复选和其兄弟元素的初始伪元素设置*/
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: blue;
            border-radius:3px;
        }
        .test-checkbox:checked+span::before{/*复选的伪类为checked时，和其兄弟元素span的初始伪元素设置*/
            content: "\2713";
            color: #fff;
            font-size: 21px;
            text-align: center;
            line-height: 21px;
        }
        .demo1 .radio:checked+label::before{/*单选的伪类为checked时，和其兄弟元素span的初始伪元素设置*/
            content: "\2022";
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 16px;
        }
        .demo1 .checkbox:checked+label::before{
            /*复选的伪类为checked时，和其兄弟元素span的初始伪元素设置*/
            content: "\2713";
            color: #fff;
            font-size: 21px;
            text-align: center;
            line-height: 21px;
        }

补充一下，以上方法运用到了字体图标，用了两种方法实现css3添加样式。分别是添加伪类+label和添加伪元素（span）
2.通过jQuery或者js
其实通过js实现想要的效果有很多方式，比如更改背景图片，切换背景字体图标，结合雪碧图等；现就前两种简要叙述如下：

通过jQuery更改背景图片

<script>
    $(function(){
        $(".demospan").bind("click",function(){
            $(this).addClass("on").siblings().removeClass("on");
        })

        $(".piaochecked").bind("click",function(){
            $(this).hasClass("on_check")?$(this).removeClass("on_check"):$(this).addClass("on_check");
            // $(this).toggleClass("on_check");
        })
    })
</script>

当然前期要设置好不同的样式类，可以通过添加背景图片，也可以通过添加字体图标（首选），用js代码书写也可以参考上述代码，实现起来也比较简单。
由于笔者刚入门前端，不足之处还望同行们批评指正，感谢review！

三种方法（css3，js，jq）实现表单元件样式原创