如何在不丢失Firefox和WebKit浏览器中的默认边框的情况下将背景图像应用于文本输入？

出于某种原因,如果您为其提供背景图像,大多数现代浏览器将停止将其默认输入边框样式应用于文本框.相反,你得到了丑陋的插图风格.据我所知,没有CSS方式来应用默认浏览器样式.

IE 8没有这个问题.Chrome 2和Firefox 3.5也可以,我也假设其他浏览器.从我在网上看到的IE 7有同样的问题,但该帖子没有解决方案.

这是一个例子:

在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); background-position: 1px -179px; background-repeat: no-repeat; }

更新:CSS关闭足够的解决方案:基于来自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; }

sholsinger.. 10

在文本输入上更改边框或背景样式时,它们将恢复为最基本的渲染模式.os风格的文本输入通常是叠加(如flash),它们呈现在文档的顶部.

我不相信你的问题有一个纯CSS修复.在我看来,最好的办法是选择你喜欢的风格并用CSS模仿它.所以无论你使用什么浏览器,输入看起来都一样.你仍然可以有悬停效果等.OS X风格的发光效果可能很棘手,但我确信它是可行的.

@Alex Morales:你的解决方案是多余的.边界:0; 被忽略而有利于边界:1px solid#abadb3; 并导致通过线路传输不必要的字节.

在文本输入上更改边框或背景样式时,它们将恢复为最基本的渲染模式.os风格的文本输入通常是叠加(如flash),它们呈现在文档的顶部.

我不相信你的问题有一个纯CSS修复.在我看来,最好的办法是选择你喜欢的风格并用CSS模仿它.所以无论你使用什么浏览器,输入看起来都一样.你仍然可以有悬停效果等.OS X风格的发光效果可能很棘手,但我确信它是可行的.

@Alex Morales:你的解决方案是多余的.边界:0; 被忽略而有利于边界:1px solid#abadb3; 并导致通过线路传输不必要的字节.

这是我使用的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;
}

一旦选中:active,您也可以应用并给出蓝色色调的控件.