默认情况下,<input type="search" />
呈现为Mac OS X上的“原生”搜索字段(圆角,清除按钮等)。我想完全删除此自定义样式,以使输入看起来与等效文本输入(<input type="text" />
)相同,但同时保持输入类型设置为search
。
我已经尝试了-webkit-appearance: none;
,它非常接近...但是有一些有趣的边缘/填充,我似乎无法覆盖,这会导致搜索字段的宽度呈现比文本输入短约20px。
是否还有其他-webkit-
特定属性我不知道完全禁用样式?
答案 0 :(得分:61)
试试这些款式:
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
答案 1 :(得分:1)
对于仍然需要支持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;
}
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>