css – 如何应用背景图像到文本输入,而不会失去Firefox和WebKit浏览器的默认边框?

前端之家收集整理的这篇文章主要介绍了css – 如何应用背景图像到文本输入,而不会失去Firefox和WebKit浏览器的默认边框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
由于某种原因,如果你给他们一个背景图像,大多数现代浏览器将停止应用他们的默认输入边框样式到文本框。相反,你得到那丑陋的插入风格。从我可以告诉,没有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输入解决方案,但这里是我现在将使用的解决方法。请注意,这是粘贴在我的应用程序,所以不是一个很好,独立的例子像上面。我刚刚包括我的大型网络应用程序的相关部分。你应该能够得到的想法。 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关闭足够的解决方案:根据kRON的建议这里的CSS使输入匹配FF和IE在Vista中,这是一个很好的选择,如果你决定放弃纯默认值并强制执行一种风格。我已经修改他的轻微,并添加了“蓝色”的效果

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格式的文本输入通常是在文档顶部渲染的覆盖(如flash)。

我不相信有一个纯CSS修复你的问题。最好的事情 – 在我看来,是选择一个你喜欢的样式,并用CSS模拟它。所以,无论你是什么浏览器,输入将看起来一样。你仍然可以有悬停效果等。 OS X风格的发光效果可能是棘手的,但我敢肯定,它是可行的。

@Alex Morales:你的解决方案是多余的。 border:0;被忽略支持border:1px solid#abadb3;并导致跨线路传输不必要的字节。

原文链接:https://www.f2er.com/css/221205.html

猜你在找的CSS相关文章