CSS 如何在不丢失 Firefox 和 WebKit 浏览器中的默认边框的情况下将背景图像应用于文本输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1100409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I apply a background image to a text input without losing the default border in Firefox and WebKit browsers?
提问by Jade Ohlhauser
For some reason most modern browsers will stop applying their default input border style to text boxes if you give them a background image. Instead you get that ugly inset style. From what I can tell there's no CSS way to apply the default browser style either.
出于某种原因，如果您给文本框提供背景图像，大多数现代浏览器将停止将其默认输入边框样式应用于文本框。相反，你会得到那种丑陋的插图风格。据我所知，也没有 CSS 方法可以应用默认浏览器样式。
IE 8 doesn't have this problem. Chrome 2 and Firefox 3.5 do and I assume other browsers as well. From what I've read online IE 7 has the same problem, but that post didn't have a solution.
IE 8 没有这个问题。Chrome 2 和 Firefox 3.5 可以，我假设其他浏览器也是如此。从我在线阅读的内容来看，IE 7 也有同样的问题，但该帖子没有解决方案。
Here's an example:
下面是一个例子：
<html>
<head>
<style>
.pictureInput {
background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
background-position: 0 1px;
background-repeat: no-repeat;
}
</style>
<body>
<input type="text" class="pictureInput" />
<br />
<br />
<input type="text">
</body>
</html>
In Chrome 2 it looks like this: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
在 Chrome 2 中它看起来像这样：http: //www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
And in Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
在 Firefox 3.5 中：http: //www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
Update: JS Solution:I'm still hoping to find a pure CSS-on-the-input solution, but here's the workaround I'll use for now. Please note this is pasted right out of my app so isn't a nice, stand alone example like above. I've just included the relevant parts out of my large web app. You should be able to get the idea. The HTML is the input with the "link" class. The large vertical background position is because it's a sprite. Tested in IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. I need to tweak the background position a couple pixels in some browsers still:
更新：JS 解决方案：我仍然希望找到一个纯 CSS-on-the-input 解决方案，但这是我现在将使用的解决方法。请注意，这是从我的应用程序中直接粘贴出来的，因此不是像上面这样的一个很好的独立示例。我刚刚从我的大型网络应用程序中包含了相关部分。你应该能够理解这个想法。HTML 是带有“link”类的输入。大的垂直背景位置是因为它是一个精灵。在 IE6、IE7、IE8、FF2、FF3.5、Opera 9.6、Opera 10、Chrome 2、Safari 4 中测试。我仍然需要在某些浏览器中调整背景位置几个像素：
JS:
JS：
$$('input.link').each(function(el) {
new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
});
CSS:
CSS：
input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }
Update: CSS Close Enough Solution:Based on the suggestion from kRON here's the CSS to make the inputs match FF and IE in Vista which makes a good choice if you decide to give up on pure defaults and enforce one style. I have modified his slightly and added the "blueish" effects:
更新：CSS Close Enough 解决方案：根据 kRON 的建议，这里的 CSS 使输入与 Vista 中的 FF 和 IE 匹配，如果您决定放弃纯默认值并强制执行一种样式，这是一个不错的选择。我稍微修改了他并添加了“蓝色”效果：
CSS:
CSS：
input[type=text], select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 1px #e3e9ef solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
border-top: 1px #5794bf solid;
border-left: 1px #c5daed solid;
border-right: 1px #b7d5ea solid;
border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
采纳答案by sholsinger
When you change border or background style on text inputs They revert back to the very basic rendering mode. Text inputs that are os-style are usually overlays (like flash is) which are rendered on top of the document.
当您更改文本输入的边框或背景样式时，它们会恢复到非常基本的渲染模式。os 样式的文本输入通常是在文档顶部呈现的叠加层（如 flash 一样）。
I do not believe there is a pure CSS fix to your problem. Best thing to do - in my opinion - is to pick a style that you like and emulate it with CSS. So that no matter what browser you're in, the inputs will look the same. You can still have hover effects and the like. OS X style glow effects might be tricky, but I'm sure it is doable.
我不相信有纯 CSS 可以解决您的问题。最好的办法 - 在我看来 - 是选择一种你喜欢的样式并用 CSS 模拟它。这样无论您使用什么浏览器，输入看起来都一样。您仍然可以拥有悬停效果等。OS X 风格的发光效果可能很棘手，但我相信它是可行的。
@Alex Morales: Your solution is redundant. border: 0; is ignored in favor of border: 1px solid #abadb3; and results in unnecessary bytes transferred across the wire.
@Alex Morales：您的解决方案是多余的。边框：0；忽略边框：1px solid #abadb3; 并导致通过网络传输不必要的字节。
回答by Filip Dupanovi?
This is the CSS that I use that can provide the default look back:
这是我使用的可以提供默认回顾的 CSS：
input, select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 2px #f1f4f7 solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
You could also apply :activeand give the controls that blueishhue once they're selected.
您还可以在选择:active控件后应用并赋予其蓝色色调。
回答by varl
Update!
更新！
Ok, here is a workaround that I think is cross-browser compatible. The only issue would be that the default style differs by a few pixels so this might need some tweaking.
好的，这是我认为跨浏览器兼容的解决方法。唯一的问题是默认样式有几个像素不同，所以这可能需要一些调整。
<html>
<head>
<style>
.pictureInput {
text-indent: 20px;
}
.input-wrapper {
position:relative;
}
.img-wrapper {
position:absolute;
top:2px;
left:2px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
<input type="text" class="pictureInput" />
</div>
<br />
<br />
<input type="text">
</body>
</html>
By using absolute-relative positioning you can make the absolute div (containing the image) act absolute in relation to its parent which all browsers I know about (not counting sub-IE6 versions, IE6+ are fine) can handle. User scaling might be an issue, but this is how it is with workarounds.
通过使用绝对相对定位，您可以使绝对 div（包含图像）相对于我所知道的所有浏览器（不包括子 IE6 版本，IE6+ 都可以）处理的父级而言是绝对的。用户缩放可能是一个问题，但这就是解决方法的问题。
On the upside, you don't have to change the styles on your inputs at all (except for text-indent, but you'd do that anyway I hope).
从好的方面来说，您根本不必更改输入的样式（文本缩进除外，但我希望无论如何您都会这样做）。
On the downside, it's not the prettiest workaround.
不利的一面是，这不是最漂亮的解决方法。
Old!
老的！
I know this is not what you want, but you could do something like this to at least make all the input borders consistent.
我知道这不是你想要的，但你可以做这样的事情来至少使所有输入边框保持一致。
input {
border-color:#aaa;
border-width:1px;
}
I haven't tried it in all browsers, but since you aren't setting the border-style it might use the native style but with another size (though you can skip that too). I think the key is to just set the border-color to something so that all input fields will use the same border-color and leave the rest up to the browser.
我还没有在所有浏览器中尝试过，但是由于您没有设置边框样式，它可能会使用本机样式但使用其他大小（尽管您也可以跳过它）。我认为关键是将边框颜色设置为某些内容，以便所有输入字段都将使用相同的边框颜色并将其余部分留给浏览器。
回答by Steve Teale
I had a text background image, and this was also annoying me. So I put a relative <div> round the <input> and then added the image absolutely positioned over the <input>.
我有一个文本背景图片，这也让我很烦。所以我在 <input> 周围放了一个相对的 <div>，然后在 <input> 上添加了绝对定位的图像。
Then of course I needed a little more Javascript to hide the image if it was clicked, or if the input got the focus by tabbing, or by being clicked around the edges of the image.
然后当然我需要更多的 Javascript 来隐藏图像，如果它被点击，或者如果输入通过 Tab 键获得焦点，或者通过点击图像的边缘。
With a bit of fiddling this looked pretty good with IE8, Firefox, Chrome, and Opera, but it's a horrible kludge and it would be nice if the browsers fixed it.
稍微摆弄一下，这在 IE8、Firefox、Chrome 和 Opera 上看起来不错，但它是一个可怕的混搭，如果浏览器修复它会很好。
