javascript - 占位符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

浏览器支持

Answer 3

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

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 边框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;
}

这是工作小提琴