占位符html中的图像？

Posted 2023-03-05

【中文标题】占位符html中的图像？

【英文标题】：Image in placeholder html?

【发布时间】：2012-07-30 05:28:27

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

input.search:focus 
    background-image: none;

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

【参考方案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

【讨论】：

一个 JSFiddle 会很好。

为了记录，这样当字段聚焦时占位符图像不会消失，只是在输入内容之后。

【参考方案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 是工作小提琴

【参考方案4】：

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

http://www.w3schools.com/cs-s-ref/pr_background-image.asp

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

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

#item:focus
bacground image code here

更多关注点在这里：http://www.w3schools.com/cs-s-ref/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

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

【讨论】：

在这个（或任何东西）上可以说更好的资源是 developer.mozilla.org/en/CSS/background-image 和 developer.mozilla.org/en/CSS/background-position

谢谢，没注意到那个！好发现会更新:)

您通常可以从 w3schools 找到您需要了解的内容，但众所周知，他们提供的信息不准确w3fools.com

我有点为自己感到羞耻，应该想到这种可能性:)

我不知道，我只是懒得想了 :D