如何在mackit上的webkit中删除html5搜索输入中的水平填充或缩进？

Question

仅在mackit上的webkit中,搜索输入中的文本从左侧缩进.这是一个演示.即使在剥离所有填充,文本缩进和设置-webkit-appearance为textfield或之后none,文本仍然缩进.它看起来大约是10px左右,但是检查员没有显示任何似乎适用这种风格的CSS规则(甚至是浏览器默认值).有任何想法吗？

<input type="search" value="Search">

-webkit-appearance: textfield;
border: 1px solid #ccc;
padding: 0;
margin: 0;
text-indent: 0;

Answer 1

这是您在WebKit中重置默认样式的方法:

input[type="search"] {
    -webkit-appearance: textfield;
}

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

之后,填充问题应该消失了.如果您还要规范化取消按钮(非WebKit浏览器中没有),请添加input[type="search"]::-webkit-search-cancel-button为第二个规则的选择器.