仅具有CSS的输入字段中的占位符文本（无JavaScript）

Question

有时候（从设计的角度来看）在每个字段中都有占位符文本，而不是标记表单中的每个字段。例如，而不是这个：

             ----------------------------------
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'"/>

Answer 2

您可以使用<label>并使用z-index上的透明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;
}

Answer 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

Answer 4

尝试this：它解决了溢出的占位符和多输入案例。诀窍是将标签移到输入后面并对其进行视觉重新排序。

你不需要额外的div就可以达到你想要的效果。

Answer 5

上面所有可能只有CSS的答案都忽略了一个关键组件，这是为了防止标签作为伪占位符一旦用户不再关注该特定字段而“渗透”。

提示：

input:valid { background-color:white; }

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

建议使用<input type="email" />字段，伪类:valid确实需要输入有效的电子邮件格式（例如“xxxx@xxx.com” - 或.net或.org）等等。）。

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