-webkit-appearance: none;

今天在web群里聊天的时候,发现了这个东东,我好像不怎么认识他,因而查了下关于他的信息:css

抄的例子,web

-----------浏览器

IOS环境下的按钮都是通过美化的,但一般咱们在设计web app的时候不须要这些看上去老土的样式,因此,去除这些显得颇有必要。app

下面这句代码就是重置这些样式的:测试

-webkit-appearance: none;

一般,咱们在写移动端的web开发时,会zaicommon.css中添加如下CSS代码来:spa

input[type=button]{
	-webkit-appearance:none;
	outline:none
}
----------------------------
可是我以为他好像还有些肯定,并非那么完美。以下:
-------------------------
-webkit-appearance:none致使没法获取checkbox值

这个BUG发生的背景有点复杂。大概就是一个Form表单,要用Validation Plugin验证,Ajax提交。结果发如今Webkit浏览器下不管怎样都阻止这个form在提交的时候刷新整个页面。设计

最后总算抓到元凶是checkbox上的-webkit-appearance:none属性。orm

-webkit-appearance会将webkit浏览器中的元素默认样式去除。checkbox在这个属性下就直接隐藏掉了。而后用JS获取checkbox值时Webkit浏览器会报很奇怪的错误。给这个元素从新赋上-webkit-appearance:checkbox就不会报错了。开发

其余的的表单元素以及其余的状况并未测试。这个问题在Chrome和Safari中都会出现,应该是Webkit引擎的问题。input

--------------------------

本站公众号
   欢迎关注本站公众号,获取更多信息