与CSS的输入字段占位符的文本（不使用的JavaScript）(Placeholder text i

代替在一个标记形式的每个字段的，有时优选（从设计的角度来看），以在每个字段占位符文字。例如，代替具有这样的：

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

你有这样的：

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

在当你在野外单击，文字消失，你可以写任何你想要的。如果你跳过了场，而无需输入任何文字，然后占位符再次出现。

我已经看到了这一点做了很多方法，但所有方法涉及的JavaScript。例如，微博确实他们对一个体面的工作，注册页面，但如果已禁用Javascript你最终在字“全名”中输入你的名字。

我在寻找，将禁用JavaScript甚至工作仅CSS-方法。我想出的唯一可能的解决方案是将背景设置<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/

注意：请参阅下面的代码寿司的评论对模糊的问题：占位符文本中，只有CSS（没有的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;
}

工作小提琴