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

Question

不是在表单中标记每个字段,有时(从设计角度来看)在每个字段中都有占位符文本.例如,而不是这样:

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

你有这个:

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

当你在字段中单击时,文本消失,你可以写任何你想要的.如果跳过字段而未输入任何文本,则占位符将重新出现.

我已经看到了很多方法,但所有方法都涉及JavaScript.例如,Twitter在他们的注册页面上做得不错,但如果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注释:仅使用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;
}