修改webkit默认样式及定制漂亮的表单

 

主要来源

http://i.wanz.im/2011/02/04/remove_border_from_input_type_search/

起因是这样的。chrome下面有个表单保存cookie后，表单的背景变成了黄色。

查看控制台可以看到

input:-webkit-autofill { background-color: #FAFFBD !important; background-image: none !important; }

1 2 3 4

input : - webkit - autofill { background - color : #FAFFBD !important; background - image : none ! important ; }

!important。。确实是很恶心的。。网上的解决方法不外乎以下：  给form加上

autocomplete = "off"

1	autocomplete = "off"

跟以上问题类似的还有input等于search问题的样式变化。 http://css-tricks.com/webkit-html5-search-inputs/

根源性的问题是webkit默认的UAstyle         参考

http://wenku.baidu.com/view/9b322d6aaf1ffc4ffe47ac0e.html###

因此给表单元素加-webkit-appearance:none; 可以解决以上的问题。

之后查阅了一些资料，才知道 webkit的表单配合此属性可以非常方便的定制表单UI

http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit

很犀利啊。。

 

 

 

转载自：http://99jty.com/?p=710