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

Question

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

我尝试过 -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 中删除“×”

。 blog.maximerouiller.com/post/remove-the-x-from-internet-explorer-and-chrome-input-type-search/" rel="noreferrer">从 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 年，这可以得到简化。

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 影子 DOM 仅使用一个伪元素 -webkit-search-cancel-button 特定于 input type="search"：

另外 Safari 17.0 Shadow DOM 使用 -webkit-search-decoration< /code> 在 macOS 13.6 下添加左侧内边距，在 iOS 17.0 下在左侧添加放大镜：

演示：

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

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

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

[type="search"].as-textfield {
  appearance: textfield;
  outline-offset: -2px;
}

<input type="search" placeholder="input type='search'">

<br><br>

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

<br><br>

<input type="search" class="no-decoration" placeholder="no decoration">

<br><br>

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

<br><br>

<input type="search" class="as-textfield" placeholder="as textfield">

<br><br>

<input type="text" placeholder="input type='text'">