仅使用 CSS 的输入字段中的占位符文本（无 JavaScript）答案

【问题标题】：Placeholder text in an input field with CSS only (no JavaScript)仅使用 CSS 的输入字段中的占位符文本（无 JavaScript）
【发布时间】：2012-07-07 10:25:48
【问题描述】：

有时最好（从设计的角度）在每个字段中添加占位符文本，而不是在表单中标记每个字段。例如，不要这样：

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

你有这个：

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

当您单击该字段时，文本会消失，您可以写任何您想要的内容。如果您跳过该字段而不输入任何文本，则占位符会重新出现。

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

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

有没有人知道如何做到这一点的好资源？

【问题讨论】：

如果您能解释一下 placeholder 属性对那些消息不灵通的人的作用，那就太好了。就像我一分钟前一样。我不认为旧的 CSS（HTML5/CSS3 之前的时代）可以做到这一点......
我认为您正在将 CSS 推向它无法（还）执行您期望它的任务的领域。 ::before 和 ::after 伪元素有... 可能性，但 input 元素不可靠，任何实现伪元素的浏览器也将实现 @987654329 @属性。
@username：没错。我会在我的帖子中说得更清楚。
@DavidThomas 你错了：例如 IE8 不支持 placeholder 属性，但它支持 after 和 before 伪元素。

标签： html css placeholder

【解决方案1】：

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

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

此版本适用于 IE9 及之前的版本：

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

【讨论】：

我可能在这里遗漏了一些明显的东西，但是即使在用户输入值之后，第二个版本也不会将值设置为“全名”吗？
是的，它会 - 需要有一个条件语句表明它只会在 blur 上的值为 value='' 时恢复为“全名”
OP 询问是否可以仅使用 CSS。

【解决方案2】：

您可以使用z-index 将<label> 放在索引后面，并将background-color 放在<input> 上。使用:focus 更改为白色背景。

:first-line 有一些 Firefox 问题。

演示：http://jsfiddle.net/ThinkingStiff/bvJ43/

注意：有关模糊问题，请参阅下面的 code-sushi 评论：Placeholder text in an input field with CSS only (no JavaScript)

输出：

HTML：

<label class="input">enter name<input /><label>

CSS：

.input {
    color: gray;
    display: block;
    font-size: small;
    padding-top: 3px;
    position: relative;
    text-indent: 5px;
}

input {
    background-color: transparent;
    left: 0;
    position: absolute; 
    top: 0;   
    z-index: 1;
}

input:focus, input:first-line {
    background-color: white;
}

【讨论】：

这感觉真的很接近。如果我们能想出一种方法来允许输入比占位符短的情况，那将是完美的......
@danielfaraday 我认为在几乎所有场景中，数据都会比占位符长。保持占位符字体小，标签短，你可能很好。你可以再玩一下first-line，但我找不到任何东西让它占据整个input。
@Knu：你能发布你的代码吗？你以前的链接在我看来是一样的（占位符文本出现在模糊中）。
所以答案的长度很重要：有点失望。
一旦用户不再关注该特定字段，您就缺少防止标签“渗出”所需的关键组件。提示：input:valid { background-color:white; }。只要字段具有除'' 以外的任何值，伪类:valid 就会获得。

【解决方案3】：

试试这个：

HTML

<div>
    <input type="text" id="text"></input>
    <label for="text">required</label>
</div>

CSS

.text-wrapper {
    position: relative;
}
.text-input-label {
    position: absolute;
    /* left and right properties are based on margin, border, outline and padding of the input text field */
    left: 5px;
    top: 3px;
    color: #D1D1D1;
}
#text:focus + label {
    display: none;
}

Working Fiddle

【讨论】：

仍然没有 bueno - 在模糊中您可以看到标签。您需要为input:valid 设置一个类以使标签停止显示。

【解决方案4】：

上面所有可能仅使用 CSS 的答案都忽略了一个关键组件，一旦用户不再关注该特定字段，该组件是防止充当伪占位符的标签“渗出”所必需的。

提示：

input:valid { background-color:white; }

只要字段具有除'' 之外的任何值，就会获得伪类:valid。因此，当您的用户在他或她自己的字段中输入任何内容时，那里显示的标签将停止显示。

请注意<input type="email" /> 字段，伪类:valid 确实并且实际上需要输入有效的电子邮件格式（例如“xxxx@xxx.com” - 或.net 或.org 等） .

如何在此处执行此操作的完整说明：http://css-tricks.com/float-labels-css/

【讨论】：

【解决方案5】：

试试this：它解决了占位符溢出和多输入的情况。诀窍是将标签移到其输入后面并在视觉上重新排序。

你不需要额外的 div 来实现你想要的。

【讨论】：

不错！但它也有同样的问题。当您在其中放置一些文本并进行模糊处理时，占位符就会出现。
@ThinkingStiff 这是一个与键盘导航场景相关的边缘案例。
@Kun 边缘案例？每当您键入一些文本，然后将输入移至下一个输入时，您的占位符就会覆盖您刚刚键入的文本。这是一个主要用例。 +1 <label> 想法。
@ThinkingStiff 检查我的更新现在下一个输入焦点保持前一个的背景。
非常好！巧妙使用~。