Placeholder text in an input field with CSS only (no JavaScript)

Question

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'.

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.

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

Answer 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:

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

Answer 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.

:first-line has some Firefox issues.

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)

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

Answer 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

Answer 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.

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. "xxxx@xxx.com" -- or .net or .org, etc.).

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

Answer 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.