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

Instead of labeling each field in a form, it is sometimes preferable (from a design standpoint) to have placeholder text in each field. For example, instead of having this:

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

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

you have this:

你有这个:

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

The when you click in the field, the text disappears and you can write whatever you want. If you skip over the field without entering any text, then the placeholder reappears.

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

I've seen this done many ways, but all methods involve JavaScript. For example, Twitter does a decent job on their signup page but if Javascript is disabled you end up typing your name over the word 'Full name'.

我已经看到了很多方法,但所有方法都涉及JavaScript。例如,Twitter在他们的注册页面上做得不错,但是如果Javascript被禁用,你最终会在“全名”这个词上输入你的名字。

I'm looking for a CSS-only method that would work even with JavaScript disabled. The only potential solution I've come up with is to set the background of the <input> tag to an image of the desired text and then use the input:focus pseudo-class to clear the background image when someone clicks on the text box. This seems to work but it would be nice not to have to use images.

我正在寻找一种只支持CSS的方法,即使禁用了JavaScript也能正常工作。我想出的唯一可能的解决方案是将标签的背景设置为所需文本的图像,然后使用input:focus伪类在有人点击文本框时清除背景图像。这似乎有效,但不必使用图像会很好。

Does anyone know of a good resource on how to do this?

有谁知道如何做到这一点的良好资源?

5 个解决方案

#1

This is the preferred method, and works in all current browsers:

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

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

This version works for IE9 and before:

此版本适用于IE9及之前:

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

#2

You can do this with a <label> placed behind the index using z-index and a transparent background-color on the <input>. Use :focus to change to a white background.

您可以使用z-index和上的透明背景颜色,使用放置在索引后面的来执行此操作。使用:焦点改变为白色背景。

:first-line has some Firefox issues.

:一线有一些Firefox问题。

Demo: http://jsfiddle.net/ThinkingStiff/bvJ43/

Note: See code-sushi's comment below for blur issues: Placeholder text in an input field with CSS only (no JavaScript)

注意:有关模糊问题,请参阅下面的code-sushi注释:仅使用CSS的输入字段中的占位符文本(无JavaScript)

Output:

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;
}

#3

Try this:

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

#4

All of the presumably CSS-only answers above have neglected a critical component which is required in order to prevent the label acting as a pseudo-placeholder from "bleeding through" once the user is no longer focused on that particular field.

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

Hint:

input:valid { background-color:white; }

The pseudo-class :valid obtains whenever a field has any value other than ''. So when your user enters anything in the field of his or her own, the label displayed there will stop being displayed.

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

Be advised with <input type="email" /> fields, the pseudo-class :valid does and will actually require input of a valid email format (e.g. "[e-mail]" -- or .net or .org, etc.).

建议使用字段,伪类:有效并且实际上需要输入有效的电子邮件格式(例如“[e-mail]” - 或.net或.org等)。

Full instructions how to do this here: http://css-tricks.com/float-labels-css/

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

#5

Try this: it solves the overflowing placeholder and multi-input cases. The trick is to move the labels behind their inputs and reorder them visually.

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

You don't need an extra div to achieve what you want.

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