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

StackOverflow https://stackoverflow.com/questions/1100409

题

由于某种原因，如果您为文本框提供背景图像，大多数现代浏览器将停止将默认输入边框样式应用于文本框。相反，你会得到那种丑陋的插图风格。据我所知，也没有 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 是带有“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; }
有帮助吗？

解决方案

当您更改边框或背景样式上的文字输入他们回复到非常基本的渲染模式。的文本输入是OS式通常是覆盖（如闪光灯），其在文档上的顶部呈现。

我不相信有一个纯CSS修复您的问题。在我看来 - - 做最好的事情就是挑选你喜欢的风格，并与CSS效仿。所以，无论你在什么浏览器，输入会看起来是一样的。你仍然可以有悬停效果等。 OS X风格的发光效果可能会非常棘手，但我敢肯定它是可行的。

@Alex莫拉莱斯：您的溶液是多余的。边界：0;有利于边境的被忽略：1px的固体＃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并给予青色的控件色相一旦他们选择。

更新！

确定，这里是我认为是跨浏览器兼容的解决方法。唯一的问题是，默认的样式几个像素不同，所以这可能需要一些调整。

<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>

利用绝对相对定位可以使绝对股利（含图片）行事相对于其父所有浏览器我知道绝对（不包括子IE6版本，IE6 +是罚款）可以处理。用户比例可能是一个问题，但这是它是如何与解决方法。

从正面看，你不必在所有来改变你的输入方式（除TEXT-INDENT，但你会做，反正我希望）。

在下行，它不是最漂亮的解决方法。

老！

我知道这是不是你想要的，但你可以做这样的事情，至少使所有的输入边界相一致。

input {
    border-color:#aaa;
    border-width:1px;
}

“示例图像”

我还没有尝试过所有的浏览器，但因为你没有设置边框样式，可能使用本机的风格，但与其他尺寸（尽管你可以跳过这太）。我认为关键是要只是边框颜色设置的东西，使所有输入字段将使用相同的边框颜色，剩下的最多的浏览器。

我有一个文本的背景图像，同时这也是讨厌我。所以我把相对的

轮<输入>中，然后加入绝对定位在<输入>图像。

然后，当然，我需要更多一点Javascript来隐藏图像，如果它被点击，或者如果输入了由互联的焦点，或者通过被点击周围的图像。

的边缘

随着有点摆弄这个看上去与IE8，火狐，Chrome和Opera不错，但它是一个可怕的杂牌组装电脑，这将是很好，如果浏览器固定它。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top