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; 
}

堆栈摘要中的演示＆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>

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

2 个答案:

堆栈摘要中的演示＆jsFiddle