Pure CSS form hints

Original: http://jsfiddle.net/csswizardry/X3V54/

by Jens Grochtdreis

HTML

<form action=#>
    
    <p>
        <label for=name>Name</label>
        <input id=name type=text class=text-input>
        <small class=help>First name or nickname</small>
    </p>
    
    <p>
        <label for=email>Email</label>
        <input id=email type=email class=text-input>
        <small class=help>We will not share your email address</small>
    </p>
    
</form>

CSS

label{
    display:block;
    font-weight:bold;
}

.help{
    /* Using display:none; would hide the text from screen-readers, hiding off-screen is more accessible. */
    position:absolute;
    left:-99999px;
}
.text-input:active + .help,
.text-input:focus + .help{
    position:static;
}