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 元素。在有这样的规范之前，我不会期望有一致的行为。