CSS:关于“-webkit-appearance: none”样式使用问题

转载 2015年11月18日 22:21:08
场景:在开发微商城的时候,经常会遇到ios端和安卓端的样式显示不一样,例如同一按钮(样式一样)会显示不一样的颜色,导致项目整体的搭配不是很好.在网上搜索了一番后,发现css样式:-webkit-appearance: none,就可以去除浏览器默认样式.
 
ul, li, dl, dt, dd, form, h1, h2, h3, h4, p, input, form {
margin: 0px;
padding: 0px;
-webkit-appearance: none;
}

 

 

问题:
    但是后来发现一个问题,微商城的input的checkbox和radio类型在安卓端无法正常显示,但在ios端和pc端可以正常,通过排查发现,原来是在全局css定义样式之后(如上样式)所产生的问题
 
解决方案:
        为input对应的类型对  -webkit-appearance 进行取值,例如:
 
input[type=checkbox]{
-webkit-appearance: checkbox;
}

 

 

-webkit-appearance属性拓展(以下信息从网上摘取):
 
①说明:  
       -webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。此属性非标准且渲染效果在不同浏览器下不同,有些属性值甚至不支持,请慎用。
 
②前缀说明
       webkit是一种浏览器私有前缀,是浏览器对新css实现的一个提前支持-webkit-前缀是指webkit内核的浏览器,与之相同的还有一个浏览器私有前缀-moz-,-moz-是指Firefox内核的浏览器
 
③浏览器私有属性说明
      为什么要有私有前缀呢?因为制定HTML和CSS标准的组织W3C动作是很慢的。通常,有w3c组织成员提出一个新属性,比如说圆角border-radius,大家都觉得好,但是w3c不会为这个属性制定标准,而是要走很复杂的程序,经过很多审查。而浏览器商不愿意等那么久,他们觉得一个属性已经够成熟了,就会在浏览器中加入支持。但是避免日后w3c公布标准时有所变更,就会加入一个私有前缀,比如-webkit-border-radius,通过这种方式来提前支持新属性,等到日后w3c公布了标准,border-radius的标准写法确立之后,再让新版的浏览器支持border-radius这种写法。

相关文章推荐

-webkit-appearance 使用说明

前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appea...

css中使用“-webkit-appearance: none;”去除系统默认appearance的样式引发的问题

解决网站bug时,发现一个棘手的问题:的复选框选中了没有打钩,经排查,是由于css中“-webkit-appearance: none;”导致的,改成“-webkit-appearance: chec...

Bug笔记:-webkit-appearance:none导致无法获取checkbox值

这个BUG发生的背景有点复杂。大概就是一个Form表单,要用Validation Plugin验证,Ajax提交。结果发现在Webkit浏览器下无论怎样都阻止这个form在提交的时候刷新整个页面。 ...
  • jyee721
  • jyee721
  • 2013年01月17日 10:51
  • 4511

修改select默认样式,兼容IE9

前面有篇文章已经提供了如何修改select标签的默认样式,但是只能兼容到ie10,要兼容ie9只能模拟一个类似的 html结构:                                ...

ie下select默认样式修改

chrome下浏览: IE和FF下浏览: 使用select做下拉菜单,使用appearance:none;可以消除默认样式,但是要每个浏览器兼容到 .contactus2...

使用css3的appearance改变元素样式

经常我们想去掉系统默认的样式,例如checkbox,radio,button,从而给设置为各浏览器兼容的统一的自定义样式,就可以使用appearance,不过目前只支持带前缀的: -webkit-a...
  • atgwwx
  • atgwwx
  • 2015年01月13日 19:20
  • 546

移动端常见的一些兼容性问题

1、安卓浏览器看背景图片,有些设备会模糊。 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率...

去除select边框和三角-----appearance:none

隐藏select边框

怎么去掉select边框和小三角,appearance用法

今天写微信网站的静态页面,想去掉select自带的小三角和边框,用以往的办法不行了,微信内置的是qq浏览. 以往的办法:设置select的边框为0px,背景设成透明(background: ...

去除select下拉框默认样式以及一些兼容问题

今天遇到的问题,并在这里做一下记录和总结,快下班啦 happy!!!去除select下拉框默认样式select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ bord...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS:关于“-webkit-appearance: none”样式使用问题
举报原因:
原因补充:

(最多只允许输入30个字)