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

Question

我一直在苦恼如何让Chrome为我的search输入框设置背景图片。火狐浏览器没有问题，但我担心这是因为它将输入框视为常规文本输入框。这真的不可能吗？

您可以尝试以下示例：

<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的怪癖之一？ :\

- Jason

Answer 1

如果你在 HTML5 搜索框（包括背景图片）的 CSS 样式中加入以下代码，就能让 Chrome（和 Safari）更好地支持：

-webkit-appearance: none;

你也可以将 -webkit-box-sizing 改为...

-webkit-box-sizing: content-box;

...因为 Webkit 默认使用边框盒模型（即旧版 IE5 盒子模型），而这种情况需要改变。

需要注意的是，目前还没有（显而易见的）办法可以对清除搜索框中内容的按钮进行样式设置和位置调整。由于只有 Webkit 生成该按钮，所以你可能会遇到一些跨浏览器的问题。

- RwwL

---

是的，我意识到我可能回答得太晚了，对于提供帮助来说已经没有什么用处了。但我从相关问题的搜索中进入了这篇帖子，所以其他人也可能会这样做... - RwwL

是的，我在一些研究之后看到了那些属性。我认为解决方法是监听盒子上的点击事件，如果点击后盒子的值为空，则运行代码。 - Jason

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;
}

- Dijup Tuladhar

Answer 3

取消按钮可以使用以下样式进行设置：

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/

- Tom

Answer 4

就像你所说的，Mozilla将搜索输入视为文本。然而，对于Webkit浏览器（Chrome，Safari），搜索输入被样式化为客户端创建的HTML包装器，用于内部Webcore Cocoa NSSearchField。这就是它具有圆角和“x”按钮以在其中存在文本时清除自身的原因。不幸的是，目前这些额外功能似乎无法通过CSS / JS进行访问，并且似乎没有W3规范规定可以应用于此元素以及其他新的HTML5元素的CSS属性。在有这样的规范之前，我不希望有一致的行为。

- mVChr

---

呃...我没看到你说的圆角，但我明白你的意思。糟糕。 - Jason