个人中心
gpt4 book ai didi

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

转载 作者：数据小太阳 更新时间：2023-10-29 09:15:36 42 4
gpt4 key购买 nike

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

最佳答案

当您更改文本输入的边框或背景样式时，它们会恢复到非常基本的呈现模式。操作系统风格的文本输入通常是在文档顶部呈现的叠加层(就像 flash 一样)。

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

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

关于css - 如何在不丢失 Firefox 和 WebKit 浏览器中的默认边框的情况下将背景图像应用于文本输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1100409/

42 4 0
文章推荐： css - Emacs、自动完成模式、CSS、痛苦。 (插图!)
文章推荐： css - 如何使用css3更改占位符颜色？
文章推荐： 具有左右流动的 CSS 列
文章推荐： css - 停止 Firefox DPI 缩放(当 Windows 设置为 125% 时)
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com