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

发布于 2024-07-26 09:16:40 字数 2699 浏览 5 评论 0原文

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

原文

For some reason most modern browsers will stop applying their default input border style to text boxes if you give them a background image. Instead you get that ugly inset style. From what I can tell there's no CSS way to apply the default browser style either.

IE 8 doesn't have this problem. Chrome 2 and Firefox 3.5 do and I assume other browsers as well. From what I've read online IE 7 has the same problem, but that post didn't have a solution.

Here's an example:

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

In Chrome 2 it looks like this: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6

And in Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc

Update: JS Solution: I'm still hoping to find a pure CSS-on-the-input solution, but here's the workaround I'll use for now. Please note this is pasted right out of my app so isn't a nice, stand alone example like above. I've just included the relevant parts out of my large web app. You should be able to get the idea. The HTML is the input with the "link" class. The large vertical background position is because it's a sprite. Tested in IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. I need to tweak the background position a couple pixels in some browsers still:

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

Update: CSS Close Enough Solution: Based on the suggestion from kRON here's the CSS to make the inputs match FF and IE in Vista which makes a good choice if you decide to give up on pure defaults and enforce one style. I have modified his slightly and added the "blueish" effects:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月野兔 2024-08-02 09:16:40

当您更改文本输入上的边框或背景样式时，它们会恢复到非常基本的渲染模式。操作系统风格的文本输入通常是叠加层（如 Flash），呈现在文档顶部。

我不相信有一个纯 CSS 可以解决你的问题。在我看来，最好的做法是选择您喜欢的样式并使用 CSS 进行模拟。这样，无论您使用什么浏览器，输入看起来都是一样的。您仍然可以具有悬停效果等。 OS X 风格的发光效果可能很棘手，但我确信它是可行的。

@Alex Morales：你的解决方案是多余的。边框：0；被忽略，有利于边框：1pxsolid #abadb3；并导致通过线路传输不必要的字节。

回复收藏 0 原文

愿与i 2024-08-02 09:16:40

这是我使用的 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 并在选择控件后为控件提供蓝色色调。

This is the CSS that I use that can provide the default look back:

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

You could also apply :active and give the controls that blueish hue once they're selected.

回复收藏 0 原文

请帮我爱他 2024-08-02 09:16:40

更新！

好的，这是一个我认为跨浏览器兼容的解决方法。唯一的问题是默认样式存在几个像素的差异，因此可能需要一些调整。

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

通过使用绝对相对定位，您可以使绝对 div（包含图像）相对于其父级表现绝对，我所知道的所有浏览器（不包括 IE6 子版本，IE6+ 都可以）都可以处理。用户扩展可能是一个问题，但这就是解决方法的问题。

从好的方面来说，您根本不必更改输入的样式（文本缩进除外，但我希望您无论如何都会这样做）。

不利的一面是，这不是最好的解决方法。

旧！

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

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

我还没有在所有浏览器中尝试过它，但由于您没有设置边框样式，它可能会使用本机样式但具有其他尺寸（尽管您也可以跳过它）。我认为关键是将边框颜色设置为某种颜色，以便所有输入字段都将使用相同的边框颜色，并将其余部分留给浏览器。

Update!

Ok, here is a workaround that I think is cross-browser compatible. The only issue would be that the default style differs by a few pixels so this might need some tweaking.

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

By using absolute-relative positioning you can make the absolute div (containing the image) act absolute in relation to its parent which all browsers I know about (not counting sub-IE6 versions, IE6+ are fine) can handle. User scaling might be an issue, but this is how it is with workarounds.

On the upside, you don't have to change the styles on your inputs at all (except for text-indent, but you'd do that anyway I hope).

On the downside, it's not the prettiest workaround.

Old!

I know this is not what you want, but you could do something like this to at least make all the input borders consistent.

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

I haven't tried it in all browsers, but since you aren't setting the border-style it might use the native style but with another size (though you can skip that too). I think the key is to just set the border-color to something so that all input fields will use the same border-color and leave the rest up to the browser.

回复收藏 0 原文