• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > Div+Css >  CSS3 -webkit-appearance a正文

CSS3 -webkit-appearance appearance

作者:网页模板
类型:图文教程
点击次数:
发布时间:2018-05-17 12:30
分享到:
我爱模板网在做下面的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属性改变任何元素的浏览器默认风格
(责任编辑:网页模板)
  • 本文标签:
  • appearance
overflow:auto导致绝对定位占位置,overflow-x和overflow-y值问题
前端学习路线