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...
  • u011034081
  • u011034081
  • 2015年03月05日 09:50
  • 6369

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

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

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

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

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

隐藏select边框
  • Bright2017
  • Bright2017
  • 2017年06月24日 16:10
  • 397

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

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

如何改变默认的checkbox样式

我们在项目中使用到input标签的checkbox的时候,它的默认样式通常无法满足项目需求,主要是它显得有点小而丑。将它根据项目的需求进行改造就是我们要做的事情了,下面讲两种常用的做法。1.使用背景图...
  • github_37772805
  • github_37772805
  • 2017年07月07日 22:13
  • 6518

修改select默认样式,兼容IE9

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

ie下select默认样式修改

chrome下浏览: IE和FF下浏览: 使用select做下拉菜单,使用appearance:none;可以消除默认样式,但是要每个浏览器兼容到 .contactus2...
  • u012011360
  • u012011360
  • 2015年07月29日 20:23
  • 8797

自定义复选框、单选按钮外观方法。支持IE、Firefox、chrome

当UI拿给你的设计稿中的复选框或单选按钮的外观与默认的外观出入很大,更漂亮,色彩更艳丽,是否会嘴角一抽,一筹莫展。不怕!在这里,你将找到完美的解决方法。...
  • as1200
  • as1200
  • 2016年05月11日 10:06
  • 4087

html 简单select样式修改并兼容IE浏览器

//去掉ie下select下拉箭头按钮 select::-ms-expand { display: none; } .history-select{ width: 120px; ...
  • u010670151
  • u010670151
  • 2016年11月15日 09:18
  • 1933
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS:关于“-webkit-appearance: none”样式使用问题
举报原因:
原因补充:

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