由于某种原因，如果你给他们一个背景图像，大多数现代浏览器将停止应用他们的默认输入边框样式到文本框。相反，你得到那丑陋的插入风格。从我可以告诉，没有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输入解决方案，但这里是我现在将使用的解决方法。请注意，这是粘贴在我的应用程序，所以不是一个很好，独立的例子像上面。我刚刚包括我的大型网络应用程序的相关部分。你应该能够得到的想法。 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关闭足够的解决方案：根据kRON的建议这里的CSS使输入匹配FF和IE在Vista中，这是一个很好的选择，如果你决定放弃纯默认值并强制执行一种风格。我已经修改他的轻微，并添加了“蓝色”的效果：
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; }
