Question

我一直在试着让Chrome为我的search输入设置背景图片。 Firefox没有问题，但我担心这是因为它将输入视为常规文本输入。这根本不可能吗？

试试这个演示：

<input type="search" />

input[type="search"] {
background: transparent 
    url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}

如果它正常工作，它应该将Google的徽标（或其一部分）作为“搜索”输入的背景图像。但正如您在Chrome中看到这一点时所看到的那样，它不起作用。任何想法，或者这只是HTML5的一个怪癖？：\

Answer 1

如果您在CSS中应用此功能，您可以让Chrome（和Safari）在HTML5搜索字段（包括背景图片）上更好地使用您的样式：

-webkit-appearance：none;

您可能还想将-webkit-box-sizing更改为...

-webkit-box-sizing：content-box;

...因为看起来Webkit将其默认为border-box值（基本上是旧的IE5盒子模型）。

请注意，仍然没有（明显的）方法对字段清除按钮的位置/外观产生任何影响，并且由于只有Webkit生成该按钮，您可能会发现一些新的跨浏览器烦恼需要处理。

Answer 2

完整的解决方案，以消除浏览器造成的所有额外设计。这会将搜索字段更改为正常输入字段

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;
}
input[type="search"]{
  -webkit-appearance: none;
  -webkit-box-sizing: content-box;
  outline:none;
}

Answer 3

就像你说的那样，Mozilla将搜索输入视为文本。但是对于Webkit浏览器（Chrome，Safari），搜索输入被设计为客户端为内部Webcore Cocoa NSSearchField创建的HTML包装器。这就是为什么它有圆形边缘和'x'按钮，当它内有文本时清除它自己。不幸的是，目前CSS / JS不仅无法访问这些额外的功能，而且似乎没有W3规范可以将CSS属性应用于此元素以及其他新的HTML5元素。在有这样的规范之前，我不希望有一致的行为。

Answer 4

可以使用以下

设置取消按钮的样式

input[type="search"]::-webkit-search-cancel-button {

   /* Remove default */
    -webkit-appearance: none;

    /* Now your own custom styles */
    height: 10px;
    width: 10px;
    background: red;
    /* Will place small red box on the right of input (positioning carries over) */

}

可以使用

删除样式

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/7261-webkit-html5-search-inputs/

HTML5搜索输入：Chrome中没有背景图片？

4 个答案: