如何删除所有默认的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 中删除“×”

根据文章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; 
}

Stack Snippets 和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 年，这可以得到简化。

Firefox 搜索字段显示为文本字段。只有 Chrome 和 Safari 会更改搜索字段的外观。

• 删除取消按钮（Chrome 和 Safari）：

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

• 删除 macOS 下 Safari 左侧的内边距或 iOS 下左侧的放大镜：

[type="search"]::-webkit-search-decoration {
  appearance: none;
}

• 两个都：

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

• 使搜索字段像 Safari 下的文本字段一样显示：

[type="search"] {
  appearance: textfield;
  outline-offset: -2px; /* Fix outline style in Safari */
}

（来源： https: //github.com/necolas/normalize.css/blob/8.0.1/normalize.css#L285-L293）

“破坏-2px”Chrome :-/

• 一些解释：

-webkit-search-results-button并且-webkit-search-results-decoration不需要，因为Chrome >= 53（2016 年发布）不再支持该results属性。

Chrome 117 Shadow DOM 仅使用一个伪元素，-webkit-search-cancel-button该元素特定于input type="search"：

此外，Safari 17.0 的 Shadow DOM-webkit-search-decoration在 macOS 13.6 下添加了左侧内边距，在 iOS 17.0 下在左侧添加了放大镜：

演示：

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

[type="search"]::-webkit-search-decoration {
  appearance: none;
}