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

【问题标题】：How do I remove all default Webkit search field styling?如何删除所有默认的 Webkit 搜索字段样式？
【发布时间】：2012-03-14 08:38:38
【问题描述】：

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

我试过-webkit-appearance: none;，它非常接近......但是我似乎无法覆盖的边距/填充有一些有趣的事情，这导致搜索字段的宽度呈现〜20px比文本输入短。

是否还有另一个我不知道的 -webkit- 特定属性可以完全禁用样式？

【问题讨论】：

标签： css search input textbox webkit

【解决方案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>

【讨论】：

我想补充一下这个答案，重要的是要像在这个例子中一样分别保留 IE 和 Chrome 规则。如果将所有 6 个结合在一起，Chrome 将无法理解 IE 的规则，反之亦然，这反过来又会导致两个浏览器都忽略整个规则集

【解决方案2】：

试试这些样式：

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

【讨论】：

您也可以使用-webkit-appearance:none; 代替display: none;，它将这个疯狂的供应商前缀规则保留在自己的空间中。
请注意，这修复了在outline-offset: -2px; 的一些常见样式重置中解决的大纲问题。有了这些规则，outline-offset 就不需要了。