像文本字段一样设置输入类型搜索字段的样式答案

【问题标题】：Styling input type search field like a text field像文本字段一样设置输入类型搜索字段的样式
【发布时间】：2012-09-15 02:55:59
【问题描述】：

我希望我的搜索字段（在 Safari 中）看起来像一个普通的文本字段，（但添加了 x 按钮以清除搜索）

这是我目前所拥有的：

基本上，我只是应用它来重置样式。

-webkit-appearance:textfield;
-moz-appearance:textfield;

一切都很好，除了一件事。在 safari（尚未测试 firefox）中，当您单击所有输入字段时，它们周围会显示一个蓝色边框。但是，如果您在此示例中尝试这样做，您会注意到该边框的显示在文本和搜索字段之间是不同的；

对于文本字段，蓝色边框直接在字段的灰色边框上方，但对于搜索字段，有一点间距，您可以同时看到灰色边框和蓝色边框。

是否可以将其更改回其默认行为（如文本字段）？

谢谢你，卫斯理

【问题讨论】：

【解决方案1】：

您需要定义边框以消除蓝色边框效果。

border: 1px solid gray;

这是为 Firefox 准备的。

对于 Safari，您需要添加

outline: none;

【讨论】：

谢谢，但正如我所说，我不想摆脱它，我希望边框表现得像在普通文本字段上一样。现在它是带有灰色内边框的双边框。
您的问题不清楚。你能说出你到底想要什么吗？
我想如果你没有 safari 浏览器，你不会注意到它。 Safari 中的轮廓有所不同，当您单击第一个字段然后单击第二个字段时会很明显。大纲在搜索字段中有一个填充。
是的，我有 Safari。如果您想摆脱该填充，为什么不简单地删除：-webkit-appearance:textfield; -moz 外观：文本字段； ??
它必须看起来像一个普通的文本字段。