图片在占位符html中? [英] Image in placeholder html?

问题描述

我可以使用纯HTML进行此类操作吗?如果需要，可以使用CSS和JavaScript:

Can I do something like this with pure html and if needed css and javascript:

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

And when the mouse focuses, it becomes like this:

所以我在考虑图像占位符.我是在正确的轨道上，还是有更好/更简单或更直接的方法?

So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method?

编辑:仅出于好奇，我将如何使用JavaScript来完成此操作，因为当前所有答案均与CSS相关?

Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related?

推荐答案

如果您只需要支持最新的浏览器，请使用以下方法:

If you only need to support the latest Browser use this:

<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

浏览器支持

这篇关于图片在占位符html中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！