占位符html中的图像？

Question

我可以用纯 html 以及如果需要 css 和 javascript 来做这样的事情吗：

而当鼠标聚焦时，就变成了这样：

所以我在想一个图像占位符。我是在正确的轨道上，还是有更好/更简单或更直接的方法？

编辑：纯粹出于好奇，我将如何使用 JavaScript 来完成此任务，因为所有当前的答案都与 CSS 相关？

Answer 1

如果您需要图片（问题中的谷歌徽标），您应该将占位符图片设置为文本字段的背景：

input.search {
    background-image: url("placeholder.gif");
    background-repeat: no-repeat;
}
input.search:focus {
    background-image: none;
}

注意：:focus是css中的一个伪类，在聚焦时激活

Answer 2

如果你只需要支持最新的浏览器使用这个：

HTML：

<input placeholder="Google Custom Search" type="search" name="q">

CSS：

#myInput::-webkit-input-placeholder {
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput::-moz-placeholder {
  /* Firefox 19+ */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput:-moz-placeholder {
  /* Firefox 18- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput:-ms-input-placeholder {
  /* IE 10- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}

JSFiddle

Browser Support

Answer 3

您可以只使用 CSS。

您可以提供一个宽度为 4 像素的实心边框。
您可以使用moz-border 或webkit-border 半径为您的输入制作圆角。
您可以使用边框背景图片。

在这里您可以阅读有关 css3 边框http://www.w3schools.com/css3/css3_borders.asp

你可以试试

input {
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px; 
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

Here 是工作小提琴

Answer 4

据我所知，这只是 CSS 背景图片。

http://www.w3schools.com/cssref/pr_background-image.asp

看看那里，你可以通过设置它的位置来完成这个：http://www.w3schools.com/cssref/pr_background-position.asp

您还可以根据项目是否聚焦或不简单地在聚焦时显示背景图像并在不喜欢时隐藏它来更改背景图像：

#item:focus{
bacground image code here
}

更多关注点在这里：http://www.w3schools.com/cssref/sel_focus.asp

还有一些焦点用法示例：http://www.mozilla.org/access/keyboard/snav/css_usage.html

更新资源 - 感谢@MrMisterMan

http://developer.mozilla.org/en/CSS/background-image

http://developer.mozilla.org/en/CSS/background-position

JAVASCRIPT：

使用 JavaScript 将属性添加到您的元素，如下所示：

这将在获得焦点时调用您的函数并将其传递给输入元素。

你也可以检测 onfocusout

希望对你有帮助，有任何问题可以问:)