-webkit-appearance —— webkit外观样式属性

-webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

最近认真看了一下文档,-webkit-appearance是用来改变按钮和其他控件的外观,使其外观类似于原生控件。

关于这个属性以前写过 解决iOS下无法正常渲染按钮的问题 ,问题产生的原因是,iOS下的safari中有默认的按钮样式:

css 代码:
  1. input[type="button"], input[type="submit"], input[type="reset"] {
  2. -webkit-appearance: push-button;
  3. white-space: pre;
  4. }

其中-webkit-appearance: push-button;就是将按钮设置成iOS中默认原生控件的样式。

通常我们可以在相应的元素上加上

css 代码:
  1. -webkit-appearance : none ;

来移除原生控件样式。

其他几个比较有用的情况是,当我们希望某些元素设置成默写系统原生控件的样式的时候,例如下面的span标签设置成各种控件的样式:

按钮
 
 
 

等等

取值和兼容性参见:http://www.css88.com/webkit/-webkit-appearance/
注释:取值数据来自:http://ued.ctrip.com/webkitcss/prop/appearance.html

-webkit-appearance —— webkit外观样式属性的更多相关文章

  1. 【WebKit】---WebKit的CSS扩展(WebKit是私有属性)

    1.-webkit-touch-callout 当你触摸并按住触摸目标时候,禁止或显示系统默认菜单.在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单. ...

  2. webkit特有的css属性

    内容参见:http://css-infos.net/properties/webkit 具体的定义网页里有详细说明.做有一些html5的应用的时候如果不能很好的适应手机,可以到这上面去找找方法-web ...

  3. webkit的几个属性

    -webkit-text-size-adjust 1.当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-s ...

  4. appearance 设置公共属性

    //设置公共TabBarItem 的属性 [UITabBarItem appearance] //设置公共NavigationBar 的属性 [UIBarButtonItem appearance]

  5. 使用CSS3的appearance属性改变元素的外观

    昨天在和同事一起完成项目的时候,我使用了appearance来渲染select,但是在firefox下出现问题,不完美,最后去除了.但还是要学习下这个属性.大家都知道每个浏览器对HTML元素渲染都不一 ...

  6. CSS3的appearance属性--改变元素的外观

    CSS3 appearance 属性 CSS 参考手册 实例 使 div 元素看上去像一个按钮: div { appearance:button; -moz-appearance:button; /* ...

  7. 让那些为Webkit优化的网站也能适配IE10

    特别声明:此篇文章由David根据Charles Morris的英文文章原名<Adapting your WebKit-optimized site for Internet Explorer ...

  8. 让那些为Webkit优化的网站也能适配IE10(转载)

    转载地址:http://www.w3cplus.com/css3/adapting-your-webkit-optimized-site-for-internet-explorer-10.html 特 ...

  9. fedora环境安装webkit支持作爬虫下载解析JS

    环境: 我使用的fedora19.1-xfce版本,属于redhat系的桌面环境. 1.安装 webkit源码安装webkit失败,这里提供的是yum安装方式. a.查看当前yum库中的webkit资 ...

随机推荐

  1. 089、Java中String类之利用构造方法实例化

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  2. POJ 2391 Ombrophobic Bovines 网络流 建模

    [题目大意]给定一个无向图,点i处有Ai头牛,点i处的牛棚能容纳Bi头牛,求一个最短时间T使得在T时间内所有的牛都能进到某一牛棚里去.(1 <= N <= 200, 1 <= M & ...

  3. switch不能case字符串

    改用if(){ }else if(){ }

  4. NO29 用户提权sudo配置文件详解实践--志行为审计

     用户提权sudo配置文件详解实践: 放到visudo里:  验证权限:

  5. ffmpeg 学习:001-搭建开发环境

    介绍 由于命令行的ffmpeg工具无法满足产品的性能要求,需要对视频流进行兼容.所以需要调试有关的参数. FFmpeg全名是Fast Forward MPEG(Moving Picture Exper ...

  6. java理解抽象类 2.19

    // Telphone.java public abstract class Telphone{ public abstract void call(); public abstract void m ...

  7. 剑指offer 把字符串转化为整数

    题目描述 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一个合法的数值则返回0 输入描述: 输入一个字符串,包括数字字母符号,可以为空 输出描述: 如果是合法 ...

  8. 浅谈Spring 5的响应式编程

    这篇使用Spring 5进行响应式编程的入门文章展示了你现在可以使用的一些新的non-blocking, asynchronous.感谢优锐课老师给予的指导! 近年来,由于响应式编程能够以声明性的方式 ...

  9. Python最新暴力破解WiFi,攻破所有密码限制,最强破解!

    暴力破解wifi密码 这个代码也是非常简单,这里需要用Python中的pywifi这个库,所以需要在DOS命令下安装这个库,同样使用pip install pywifi,很简单就安装成功了,我用的是P ...

  10. maven详解 之 pom.xml

    Maven  一个项目管理工具  其作用就是用来管理jar 包的 maven的核心    pom.xml配置文件 <project xmlns="http://maven.apache ...