转http://i.wanz.im/2011/02/04/remove_border_from_input_type_search/
新年在家其实挺无聊的，长假什么的都是浮云，然后就给自己的博客弄个新皮，试着给页面添加点新鲜的元素，什么html5，什么css3的，然后遭遇了input这货，将它的type设置为search。
html代码如下：
|
1
|
<input type="search"class="search-text"name="s"value=""title="Enter keyword(s), then press enter"placeholder="关键词...">
|
css代码如下：
|
1
2
3
4
5
6
7
8
9
10
|
.searchbox input[type="search"] {
background-color:transparent;
border:mediumnone;
color:#666;
width:100%;
padding:0;
height:20px;
line-height:22px;
vertical-align:middle;
}
|
在IE和Firefox中显示的结果跟预期的一样，但在webkit内核浏览器里，border的设置并没有被应用。
在IE和Firefox中显示的结果：
在Chrome中显示的结果：
在Chrome开发人员工具查看input的样式可以看到如下的以及类似的UA样式：
我猜想是跟-webkit-appearance有关，于是到Google里淘了一篇介绍input的type为search的文章“WebKit HTML5 Search Inputs”，虽然文章提到了input的type为search时，样式编写有局限性（并非所有的css属性都可以被用户用代码覆盖），但没有提到这个问题的解决方案，但是我在评论中找到了解决办法。
在css里加入下面代码解决了：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.searchbox input[type="search"] {
background-color:transparent;
border:mediumnone;
color:#666;
width:100%;
padding:0;
height:20px;
line-height:22px;
vertical-align:middle;
/* 下面代码解决了问题 */
-webkit-appearance:none;
}
|
从这个属性的名字看来，只要是webkit内核浏览器遇到无法用css覆盖的内置样式，应该都能通过它解决^_^