CSS3 -webkit-appearance appearance

我爱模板网在做下面的CheckBox效果时，采用的都是span或者其他容器替代CheckBox，非常麻烦：


我爱模板网在给一个客户做网站时，发现他的网站上面的CheckBox非常漂亮，并且没有使用span等其他标签替代，直接使用了下面的代码：

<style type="text/css">
    .contact [type=checkbox] {
        -webkit-appearance: none;
        appearance: none;
        background: url(../images/check.png) no-repeat 0 0;
        width: 15px;
        height: 15px;
        background-size: 15px auto;
        border: none;
        vertical-align: middle;
        position: relative;
        top: -1px;
    }
    
    .contact [type=checkbox]:checked {
        background-position: 0 -18px;
    }
</style>

即直接给CheckBox设置background，就能改变样式，其中，

-webkit-appearance: none;
appearance: none;

这两行代码引起了我的注意，我发现去除了，背景图片就没有效果了，百度了下，原来 appearance: none; 可以更改CheckBox默认呈现的样式，非常强大，在这里标记一下。如果您希望了解更多关于这个属性，可以参考：使用CSS3的appearance属性改变任何元素的浏览器默认风格