zoukankan      html  css  js  c++  java
  • 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式

    使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角的样式,显得超级恶心,但是我们自己定义 border-radius 为 0 也无法去除这个圆角,经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式。

    我们只要对按钮设置这个属性,并设置为 ‘none’ 就可以取消浏览器对于控件的默认样式。

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

    另外这个属性也有个神奇的地方,它可以用来调用显示浏览器对各种控件的默认样式,总共有如下几个效果(将一个 Span 标签应用不同的 -webkit-appearance 效果):

    -webkit-appearance效果
    -webkit-appearance: button SPAN Tag
    -webkit-appearance: button-bevel SPAN Tag
    -webkit-appearance: caret SPAN Tag
    -webkit-appearance: checkbox SPAN Tag
    -webkit-appearance: listbox SPAN Tag
    -webkit-appearance: listitem SPAN Tag
    -webkit-appearance: menulist SPAN Tag
    -webkit-appearance: menulist-button SPAN Tag
    -webkit-appearance: menulist-text SPAN Tag
    -webkit-appearance: menulist-textfield SPAN Tag
    -webkit-appearance: push-button SPAN Tag
    -webkit-appearance: radio SPAN Tag
    -webkit-appearance: scrollbarbutton-down SPAN Tag
    -webkit-appearance: scrollbarbutton-left SPAN Tag
    -webkit-appearance: scrollbarbutton-right SPAN Tag
    -webkit-appearance: scrollbarbutton-up SPAN Tag
    -webkit-appearance: scrollbargripper-horizontal SPAN Tag
    -webkit-appearance: scrollbargripper-vertical SPAN Tag
    -webkit-appearance: scrollbarthumb-horizontal SPAN Tag
    -webkit-appearance: scrollbarthumb-vertical SPAN Tag
    -webkit-appearance: scrollbartrack-horizontal SPAN Tag
    -webkit-appearance: scrollbartrack-vertical SPAN Tag
    -webkit-appearance: searchfield SPAN Tag
    -webkit-appearance: searchfield-cancel-button SPAN Tag
    -webkit-appearance: searchfield-decoration SPAN Tag
    -webkit-appearance: searchfield-results-button SPAN Tag
    -webkit-appearance: searchfield-results-decoration SPAN Tag
    -webkit-appearance: slider-horizontal SPAN Tag
    -webkit-appearance: slider-vertical SPAN Tag
    -webkit-appearance: sliderthumb-horizontal SPAN Tag
    -webkit-appearance: sliderthumb-vertical SPAN Tag
    -webkit-appearance: square-button SPAN Tag
    -webkit-appearance: textarea SPAN Tag
    -webkit-appearance: textfield SPAN Tag
  • 相关阅读:
    Spark学习之路 (二十七)图简介
    Spark学习之路 (二十三)SparkStreaming的官方文档
    Spark学习之路 (二十一)SparkSQL的开窗函数和DataSet
    Spark学习之路 (二十)SparkSQL的元数据
    Spark学习之路 (十九)SparkSQL的自定义函数UDF
    Spark学习之路 (十八)SparkSQL简单使用
    Spark学习之路 (十七)Spark分区
    JSP中request对象常用方法汇总
    JSP中request对象常用方法汇总
    在Myeclipse10中配置tomcat后新建工程
  • 原文地址:https://www.cnblogs.com/mm2015/p/5495183.html
Copyright © 2011-2022 走看看