带有消失背景图像的输入 | CSS-Tricks

这复制了标准嵌入式 Google 搜索字段的功能。它们在背景中有一个图像，当点击输入时，图像会消失。

<form name="searchform" id="search-form">
   <div>
       <b>Search</b>
       <input type="text" name="txtInput" title="Enter the terms you wish to search for." />
       <input type="submit" value="GO!" class="submit" style="cursor: pointer;" />
   </div>
</form>

表单标记下的 JavaScript

<script type="text/javascript" language="javascript">
 (function() {
    var id = document.getElementById('search-form');
    if (id && id.txtInput) {
      var name = id.txtInput;
      var unclicked = function() {
          if (name.value == '') {
              name.style.background = '#FFFFFF url(images/googbg.png) left no-repeat';
          }
       };
       var clicked = function() {
          name.style.background = '#ffffff';
       };
    name.onfocus = clicked;
    name.onblur = unclicked;
    unclicked();
    }
  })();
</script>

查看演示

iSpy

# 2010 年 2 月 23 日

这正是我要找的。谢谢。

Artur Ejsmont

# 2010 年 7 月 13 日

这实际上很不错

我更喜欢它，而不是盒子里的默认文本 :- )

谢谢

James

# 2011 年 1 月 18 日

我在使用登录表单时遇到了问题。

如果用户返回登录页面，他们的用户名和密码将自动填入。不幸的是，脚本无法识别这一点，因此他们的凭据最终会显示在未点击的背景图像上。

有什么办法可以解决这个问题吗？

unomyname

# 2011 年 5 月 1 日

James，你问的正是我的难题所在。
你找到解决方案了吗？

Glumbo

# 2011 年 9 月 15 日

我和 James 有同样的问题

Zabi

# 2012 年 4 月 16 日

打开索引页面时，应该显示三个图像，并在 10 到 15 秒内消失。请帮我。

Adswaine

# 2012 年 6 月 3 日

谢谢！
对常见问题的简单解决方案。

非常感谢！

wongsimpang.com

# 2013 年 2 月 27 日

如何将图像位置更改为居中？

Mike

# 2013 年 9 月 1 日

谢谢！很棒 :)

Lashchevsky

# 2014 年 2 月 14 日

为什么不呢？
仅限 CSS。

input {background: url('img.jpg');}
input:focus {background: none;}

ChecMark

评论永久链接# 2014 年 5 月 20 日

Lashchevsky，谢谢！完美地解决了。我在上面添加了红色边框和彩色背景以突出显示该字段。看起来很棒！

PaulRevival

# 2015 年 9 月 29 日

Lashchevsky，+1！没有 js – 仅限 css..

要么输入上的背景图像

input { background: #fff url("img.png"); }
input:focus { background: none; }

或者用 div {position:relative} 包裹输入，并将一个真正的 ‘img’ 放入其中

<div class="wrap">
  <input>
  <div class="img-box">
    <img>
  </div>
</div>

.wrap {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}
input {
  position: relative;
  z-index: 2;
}
input:focus + .img-box {
  opacity: 0;
}

享受一些 jsFiddle http://jsfiddle.net/y38n947h/

评论

发表回复 取消回复

发表回复取消回复