zoukankan      html  css  js  c++  java
  • 用css去除chrome、safari等webikt内核浏览器对控件默认样式

    有这么一个webkit的私有属性:

        -webkit-appearance:none; /*去除input默认样式*/

    添加该样式,并且值为'none'时即可取消浏览器对于控件的默认样式。

    另外这个属性也有个神奇的地方~ 他可以用来调用显示浏览器对各种控件的默认样式,比如:

    <span style="-webkit-appearance:button;"> 我是span啊亲!!</span>

    那么他所显示的效果是:

      

    哈 觉得挺有趣的~  另外这个属性可以用来去除Iphone上面那个恶心的超大圆角的按钮默认样式,从而使自己编辑的按钮样式显示正常。

    下面是这个属性可能会有的值,也算是可以显示的浏览器控件默认效果。

    • checkbox
    • radio
    • push-button
    • square-button
    • button
    • button-bevel
    • listbox
    • listitem
    • menulist
    • menulist-button
    • menulist-text
    • menulist-textfield
    • scrollbarbutton-up
    • scrollbarbutton-down
    • scrollbarbutton-left
    • scrollbarbutton-right
    • scrollbartrack-horizontal
    • scrollbartrack-vertical
    • scrollbarthumb-horizontal
    • scrollbarthumb-vertical
    • scrollbargripper-horizontal
    • scrollbargripper-vertical
    • slider-horizontal
    • slider-vertical
    • sliderthumb-horizontal
    • sliderthumb-vertical
    • caret
    • searchfield
    • searchfield-decoration
    • searchfield-results-decoration
    • searchfield-results-button
    • searchfield-cancel-button
    • textfield
    • textarea

    具体可以浏览这个网站,上面有对于这些效果的demo,狠狠地戳这:http://davidwalsh.name/webkit-appearance

  • 相关阅读:
    springboot基本注解
    Mybatis之简单注解
    java再次学习
    在线html编辑器
    分享
    cyberduck的SSH登录
    ie67的冷知识
    css特效
    小程序分享
    css特效博客
  • 原文地址:https://www.cnblogs.com/jintaostudy/p/6594647.html
Copyright © 2011-2022 走看看