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

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/