31

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

4 回答 4

10

当您更改文本输入的边框或背景样式时，它们会恢复到非常基本的呈现模式。os 风格的文本输入通常是覆盖（如 flash），它们呈现在文档的顶部。

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

@Alex Morales：您的解决方案是多余的。边框：0；被忽略以支持边框：1px solid #abadb3; 并导致通过网络传输不必要的字节。

于 2009-07-10T21:51:22.507 回答
6

这是我使用的可以提供默认回顾的 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并在选择控件后赋予控件以蓝色调。

于 2009-08-24T12:23:44.663 回答
2

更新！

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

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

示例图像

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

于 2009-07-09T09:26:23.320 回答
0

我有一个文本背景图像，这也让我很烦。所以我在 <input> 周围放置了一个相对的 <div>，然后添加了绝对定位在 <input> 上的图像。

然后当然我需要更多的 Javascript 来隐藏图像，如果它被点击，或者如果输入通过制表符获得焦点，或者被点击图像的边缘。

稍微摆弄一下，这在 IE8、Firefox、Chrome 和 Opera 上看起来还不错，但这是一个可怕的组合，如果浏览器修复它会很好。

于 2012-06-30T11:57:53.760 回答