出于某种原因,如果您为其提供背景图像,大多数现代浏览器将停止将其默认输入边框样式应用于文本框.相反,你得到了丑陋的插图风格.据我所知,没有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是带有"link"类的输入.大的垂直背景位置是因为它是一个精灵.在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); …