4

仅在 mac 上的 webkit 中，搜索输入中的文本从左侧缩进。这是一个演示。即使在去除所有填充、文本缩进和设置-webkit-appearance为textfieldornone之后，文本仍然是缩进的。它看起来大约是 10px 左右，但检查器没有显示任何似乎应用此样式的 CSS 规则（甚至是浏览器默认值）。有任何想法吗？

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

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

2 回答 2

18

这是您真正重置 WebKit 中默认样式的方式：

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

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

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

于 2012-06-20T21:12:12.977 回答
2

默认情况下，基于 WebKit 的浏览器使用边框模型作为 input[type="search"]。如果您使用传统的 box-sizing（如果您没有声明任何其他模型，您就是这样），您可能会遇到奇怪的填充和边框行为。使固定：

input[type="search"] {
box-sizing: content-box;
}

至于-webkit-appearance- try textarea( textfield) 和none. 无论如何在 iOS 设备上测试您的页面，以确保在输入字段成为焦点后样式不会有所不同（奇怪的行为，可能是错误 - 我正在使用带有 iOS 6.0 的 iPhone 4S）

于 2013-01-27T16:07:50.520 回答