[CSS] checkbox按钮显示的自定义

上一篇提到了将input元素的type设置为radio时（也就是单选框）的自定义，那么将input元素的type为checkbox时，input的自定义显示又将如何处理呢？系统默认的显示方式是勾选，如果我们要达到手机设置界面开关按钮的显示效果，那该如何做到呢？这里为大家提供两种通过CSS来实现的方法。

方法一：使用CSS3新属性appearance

如果读过上一篇关于CSS的文章，读者可能会想到这里也可以使用元素来实现相应的自定义，但是在使用之前这里先介绍一种利用CSS3新特性的一种实现方法，该方法是参考了腾讯公司微信应用的推荐写法。

CSS3添加了一个新属性appearance，所有主流浏览器都不支持 appearance 属性，但是Firefox 支持替代的 -moz-appearance 属性，Safari 和 Chrome 支持替代的 -webkit-appearance 属性。所以在手机浏览器上该属性是都是适用的。将appearance属性设置成“none”将会隐藏的默认显示样式，但是边框的改变和背景的改变依旧可以显示出来。完整的实现代码如下：

    
    
    



    
        
  选项一        
  选项二    

（关键细节的一些说明，可以查看以上代码中的注释）
具体的显示效果如下图

显示的自定义.jpg

方法二：使用元素

虽然使用属性appearance来实现的自定义看上去的显示已经比较完美，但是这种方法其对浏览器的兼容性很不友好，尤其是IE浏览器包括edge浏览器都无法支持。为了提高兼容性，可以使用方法来实现显示的自定义。
该方法与上一篇文章介绍的方法类似，原理都是基于标签存在的特性：当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。完整的实现代码如下：

    
    
        


    
        
选项一        
选项二    

从上面的代码可以看出来，其实大部分CSS属性的设置与第一种方法是一致的，只是CSS的选择器有所更改，从“.switch-ui”变成了“.switch-ui+label”，而.switch-ui自己做了隐藏设置（“display: none; ”），让 代替做显示。

这里的按钮的显示风格只是iOS手机上的switch控件的风格，通过改变.switch-ui 的椭圆的大小以及:after 和:before的大小和位置也可以实现android手机的风格，或者更换背景图实现更多自定义的风格。