我如何摆脱水平填充或缩进在html5搜索输入在webkit的mac？ [英] How can I get rid of horizontal padding or indent in html5 search inputs in webkit on mac?

问题描述

仅在Mac上的webkit中，搜索输入中的文本从左侧缩进。 这是演示。即使解压缩所有填充，文本缩进，并将 -webkit-appearance 设置为 textfield 或 none ，文本仍然缩进。它看起来是大约10px左右，但检查员不显示任何CSS规则（甚至浏览器默认值），似乎应用此样式。任何想法？

In webkit on mac only, the text in a search input is indented from the left side. Here's a demo. Even after stripping all padding, text-indent, and setting -webkit-appearance to textfield or none, the text is still indented. It looks to be around 10px or so, but the inspector doesn't show any CSS rules (even browser defaults) that seem to apply this style. Any ideas?

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

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

推荐答案

这是如何真正重置WebKit中的默认样式：

This is how you really reset the default styling in WebKit:

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

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

之后填充问题应该消失。如果你还想要规范化取消按钮，这在非WebKit浏览器中不存在，添加 input [type =search] :: - webkit-search-cancel-button 作为第二条规则的选择器。

After that the padding problem should be gone. If you also want to normalize the cancel button, which isn't there in non-WebKit browsers, add input[type="search"]::-webkit-search-cancel-button as selector for the second rule.

这篇关于我如何摆脱水平填充或缩进在html5搜索输入在webkit的mac？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！