占位符html中的图像？

Question

我可以使用纯HTML执行此类操作吗？如果需要css和javascript：

当鼠标聚焦时，它会变成这样：

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

编辑：出于纯粹的好奇心，我将如何使用JavaScript实现这一目标，因为所有当前的答案都与CSS相关？

Answer 1

据我所知，这只是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

希望这会有所帮助，任何问题只会问：）

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

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

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

注意： :focus是css中的伪类，在焦点上激活

Answer 4

您可以只使用CSS。

你可以给出一个4px宽的实线边框 您可以使用moz-border或webkit-border半径为您的输入创建圆角 您可以使用边框背景图像。

在这里，您可以阅读有关css3 border 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 是工作小提琴