如何删除所有默认的Webkit搜索字段样式?

时间:2012-02-23 21:23:22

标签: css search input textbox webkit

默认情况下,<input type="search" />呈现为Mac OS X上的“原生”搜索字段(圆角,清除按钮等)。我想完全删除此自定义样式,以使输入看起来与等效文本输入(<input type="text" />)相同,但同时保持输入类型设置为search

我已经尝试了-webkit-appearance: none;,它非常接近...但是有一些有趣的边缘/填充,我似乎无法覆盖,这会导致搜索字段的宽度呈现比文本输入短约20px。

是否还有其他-webkit-特定属性我不知道完全禁用样式?

2 个答案:

答案 0 :(得分:61)

试试这些款式:

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

来源:http://css-tricks.com/webkit-html5-search-inputs/#comment-82432

答案 1 :(得分:1)

对于仍然需要支持IE的用户,值得一提的是,您需要一套完全不同的供应商样式,以从Internet Explorer中删除“×”

根据文章Remove the X from Internet Explorer and Chrome input type search

/* clears the 'X' from Internet Explorer */
input.hide-clear[type=search]::-ms-clear,
input.hide-clear[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0; 
}

/* clears the 'X' from Chrome */
input.hide-clear[type="search"]::-webkit-search-decoration,
input.hide-clear[type="search"]::-webkit-search-cancel-button,
input.hide-clear[type="search"]::-webkit-search-results-button,
input.hide-clear[type="search"]::-webkit-search-results-decoration {
  display: none; 
}

堆栈摘要中的演示&jsFiddle

label, input {display: block; margin-bottom: 1rem;}

/* clears the 'X' from Internet Explorer */
input.hide-clear[type=search]::-ms-clear,
input.hide-clear[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0; 
}

/* clears the 'X' from Chrome */
input.hide-clear[type="search"]::-webkit-search-decoration,
input.hide-clear[type="search"]::-webkit-search-cancel-button,
input.hide-clear[type="search"]::-webkit-search-results-button,
input.hide-clear[type="search"]::-webkit-search-results-decoration {
  display: none; 
}
<label >
  default
  <input type="search" value="query">  
</label>


<label >
  without x
  <input type="search" value="query" class="hide-clear" >  
</label>