html - 仅使用 CSS(无 JavaScript)的输入字段中的占位符文本

Question

与其在表单中标记每个字段，有时(从设计的 Angular )在每个字段中使用占位符文本更可取。例如，而不是这样:

             ----------------------------------
Full Name:  |                                  |
             ----------------------------------

你有这个:

 ----------------------------------
| Full Name                        |
 ----------------------------------

当您在该字段中单击时，文本会消失，您可以随意输入任何内容。如果您跳过该字段而未输入任何文本，则占位符会重新出现。

我见过很多方法，但所有方法都涉及 JavaScript。例如，Twitter 在其 signup page 上做得不错但是如果 Javascript 被禁用，你最终会在“全名”这个词上输入你的名字。

我正在寻找一种仅使用 CSS 的方法，即使在禁用 JavaScript 的情况下也能正常工作。我想出的唯一可能的解决方案是设置 <input> 的背景标记所需文本的图像，然后使用 input:focus当有人点击文本框时清除背景图像的伪类。这似乎可行，但最好不要使用图像。

有人知道如何执行此操作的好资源吗？

Answer 1

这是首选方法，适用于所有当前浏览器:

<input type="text" name="" placeholder="Full Name"/>

此版本适用于 IE9 及之前版本:

<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>