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

Question

默认情况下，

<input type="search" />

在 Mac OS X 上呈现为“本机”搜索字段（圆角、清除按钮等）。我想完全删除此自定义样式，以便输入看起来与等效文本输入 (

<input type="text" />

) 相同，但同时将输入类型设置为

search

。

我已经尝试过

-webkit-appearance: none;

，它非常接近...但是边距/填充发生了一些有趣的事情，我似乎无法覆盖，这导致搜索字段的宽度呈现比短约20px文本输入。

还有另一个我不知道的

-webkit-

特定属性可以完全禁用样式吗？

Answer 1

尝试这些造型：

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

Answer 2

对于那些仍然需要支持 IE 的人来说，值得一提的是，您需要一组完全不同的供应商样式来从 Internet Explorer 中删除“×”

根据文章从 Internet Explorer 和 Chrome 输入类型搜索中删除 X：

/* 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>

Answer 3

截至 2023 年，这可以简化为：

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

不需要

-webkit-search-results-button

和

-webkit-search-results-decoration

，因为 Chrome >= 53（2016 年发布） 不再支持

results

属性。

如果你检查 Shadow DOM (Chrome 117)，就会发现只有一个特定的伪元素

-webkit-search-cancel-button

是特定于

input type="search"

使用的：

演示：

input[type="search"]:not(.with-cancel-button)::-webkit-search-cancel-button {
  appearance: none;
}

<input type="search" placeholder="without cancel button">

<br>
<br>
<br>

<input type="search" class="with-cancel-button" placeholder="with cancel button">