• 苹果浏览器Safari对html标签submit按钮的默认渲染


    -webkit-appearance: none; 

    上面的设置就告诉Safari不要使用默认渲染,使用我们写好的

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

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

     使用这个之后select的小三角就消失了,可以加上background: url('http://ourjs.github.io/static/2015/arrow.png') no-repeat scroll right center transparent;

    添加该样式,并且值为'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

  • 相关阅读:
    存储过程
    pl/sql锁
    事务处理
    记录类型(学习笔记)
    ExecutorException: A query was run and no Result Maps were found for the Mapped Statement ''. It's likely that neither a Result Type nor a Result Map was specified.
    element中的el-form踩的坑
    关于location.href家族的区别和用法
    ajax的路径跳转
    使用thymeleaf模板引擎时的路径问题
    关于mybatis的传多个参数的问题
  • 原文地址:https://www.cnblogs.com/zonglonglong/p/4308086.html
Copyright © 2020-2023  润新知