HTML5搜索输入：Chrome中没有背景图片？ [英] HTML5 Search Input: No Background Image in Chrome?

问题描述

我一直在拉我的头发，试图让Chrome来创建带有背景图片的搜索输入。 Firefox没有问题，但我担心这是因为它将输入视为常规文本输入。这是不可能的？

I have been pulling my hair out trying to get Chrome to style my search input with a background image. Firefox has no problem, but I fear it's because it treats the input as a regular text input. Is this simply not possible?

尝试以演示：

<input type="search" />

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

如果运作正常， （或其一部分）作为搜索输入的背景图像。但正如你在Chrome中看到的那样，它不工作。任何想法，还是这只是HTML5的怪癖之一？ ：\

If it worked correctly, it should put Google's logo (or part of it) as the background image for the "Search" input. But as you will see when you look at this in Chrome, it DOES NOT WORK. Any ideas, or is this just one of HTML5's quirks? :\

推荐答案

您可以在HTML5搜索字段（包括背景图片）：

You can get Chrome (and Safari) to play along better with your styles on an HTML5 search field (including background images) if you apply this in your CSS:

-webkit-appearance：none;

-webkit-appearance: none;

也想将-webkit-box-sizing更改为...

You may also want to change -webkit-box-sizing to...

-webkit-box-sizing：content-box;

-webkit-box-sizing: content-box;

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

...since it appears that Webkit defaults this to the border-box value (basically the old IE5 box model).

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

Be warned, there's still no (apparent) way to have any effect on the position/appearance of the field-clearing button, and since only Webkit generates that button, you may find some new cross-browser annoyances to deal with.

这篇关于HTML5搜索输入：Chrome中没有背景图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！