出于某种原因，如果您为文本框提供背景图像，大多数现代浏览器将停止将其默认输入边框样式应用于文本框。相反，您会得到那种丑陋的插图样式。据我所知，也没有 CSS 方法来应用默认浏览器样式。
IE 8 没有这个问题。 Chrome 2 和 Firefox 3.5 可以，我假设其他浏览器也可以。从我在网上读到的 IE 7 有同样的问题，但那个帖子没有解决方案。
这是一个例子:
<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>
在 Chrome 2 中它看起来像这样:http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
在 Firefox 3.5 中:http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
更新:JS 解决方案:我仍然希望找到一个纯 CSS-on-the-input 解决方案，但这是我现在要使用的解决方法。请注意，这是直接从我的应用程序中粘贴出来的，因此不是像上面那样的一个很好的独立示例。我刚刚从我的大型网络应用程序中包含了相关部分。你应该能够明白这个想法。 HTML 是带有“链接”类的输入。较大的垂直背景位置是因为它是 Sprite 。在 IE6、IE7、IE8、FF2、FF3.5、Opera 9.6、Opera 10、Chrome 2、Safari 4 中测试。我仍然需要在某些浏览器中将背景位置调整几个像素:
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:
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; }
更新:CSS Close Enough Solution: 根据 kRON 的建议，这里的 CSS 使输入与 Vista 中的 FF 和 IE 匹配，如果您决定放弃纯默认设置，这是一个不错的选择并执行一种风格。我稍微修改了他的并添加了“蓝色”效果:
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; }
最佳答案
当您更改文本输入的边框或背景样式时，它们会恢复到非常基本的呈现模式。操作系统风格的文本输入通常是在文档顶部呈现的叠加层(就像 flash 一样)。
我认为没有纯 CSS 可以解决您的问题。在我看来，最好的办法是选择一种你喜欢的样式并用 CSS 模拟它。因此，无论您使用哪种浏览器，输入内容看起来都是一样的。您仍然可以有悬停效果等。 OS X 风格的发光效果可能很棘手，但我相信它是可行的。
@Alex Morales:您的解决方案是多余的。边界:0；被忽略以支持 border: 1px solid #ababb3;并导致通过网络传输不必要的字节。
关于css - 如何在不丢失 Firefox 和 WebKit 浏览器中的默认边框的情况下将背景图像应用于文本输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1100409/