如何删除所有默认的Webkit搜索字段样式? [英] How do I remove all default Webkit search field styling?
问题描述
默认情况下,< input type =search/>
在Mac OS X上呈现为原生搜索字段(圆角,清除按钮等) 。)。我想完全删除这个自定义样式,使输入看起来与等效的文本输入(< input type =text/>
)完全相同,输入类型设置为搜索。
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
.
我尝试过 -webkit-appearance:none ;
,它得到它非常接近...但有一些有趣的,使用边距/填充,我似乎不能覆盖,这导致搜索字段的宽度渲染〜20px比一个文本输入。
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 -
特定属性我不知道完全禁用
Is there another -webkit-
specific property I'm not aware of to totally disable the styling?
推荐答案
尝试以下样式:
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 {
display: none;
}
资料来源:http://css-tricks.com/webkit-html5-search-inputs/#comment-82432
这篇关于如何删除所有默认的Webkit搜索字段样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!