CSS 如何删除所有默认的 Webkit 搜索字段样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9421551/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I remove all default Webkit search field styling?
提问by daGUY
By default, <input type="search" />renders like a "native" search field on Mac OS X (rounded corners, clear button, etc.). I want to completely remove this custom styling so that the input looks identical to an equivalent text input (<input type="text" />), but while keeping the input type set to search.
默认情况下，<input type="search" />呈现为 Mac OS X 上的“本机”搜索字段（圆角、清除按钮等）。我想完全删除此自定义样式，以便输入看起来与等效文本输入 ( <input type="text" />) 相同，但同时将输入类型设置为search.
I've tried -webkit-appearance: none;, which gets it very close...but there's something funny going on with margins/padding that I can't seem to override, which causes the width of the search field to render ~20px shorter than a text input.
我试过-webkit-appearance: none;，它非常接近......但是我似乎无法覆盖边距/填充有一些有趣的事情，这导致搜索字段的宽度比文本输入短约 20px。
Is there another -webkit-specific property I'm not aware of to totally disable the styling?
是否有另一个-webkit-我不知道的特定属性可以完全禁用样式？
回答by trkaplan
Try these stylings:
试试这些样式：
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;
}
Source: http://css-tricks.com/webkit-html5-search-inputs/#comment-82432
来源：http: //css-tricks.com/webkit-html5-search-inputs/#comment-82432
回答by KyleMit
For those that still need to support IE, it's worth mentioning that you need an entirely differentset of vendor styles to remove the '×' from Internet Explorer
对于那些仍然需要支持 IE 的人，值得一提的是，您需要一组完全不同的供应商样式来从 Internet Explorer 中删除“×”
Per the article Remove the X from Internet Explorer and Chrome input type search:
根据文章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;
}
Demo in Stack Snippets & jsFiddle
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>