Question

I have two problems with a form I am making, the first is the I want to throw some css onto a form. This works with my <textarea> box, as it has a closing tag and you can put the text in between. The <input> tags on the other hand have to get text trough the value="" tag, which doesn’t respond to any of my CSS tries.

Secondly, I was wondering if it is possible to make the box clear itsself once it is clicked. (not sure if HTML forms support that)

Here is a link to the form with the css, so you can see the problem. http://jsfiddle.net/D39rr/5/

Answer 1

You’re looking for the placeholder attribute:

<input placeholder="Your email address" />

JS Fiddle demo.

To style the placeholder text (in compliant browsers):

::-webkit-input-placeholder,
::-moz-input-placeholder,
::-o-input-placeholder,
::-ms-input-placeholder,
::input-placeholder {
    color: #0f0;
    font-weight: bold;
}

JS Fiddle demo.

To style the text, whether it’s from the value attribute or user-entered, simply use the usual color, font-style, font-weight, etc:

input {
    color: #f00;
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
}​

JS Fiddle demo.

Incidentally, the textarea, as you correctly note, ‘has a closing tag.’ Therefore it’s not a self-closing (or void) element, and should not have a / character in its opening tag (as you do in your linked JS Fiddle: <textarea id="style" name="message" />Type out your question here</textarea>), instead it should be, simply:

<textarea id="style" name="message">Type out your question here</textarea>

Or, with the placeholder:

<textarea id="style" name="message" placeholder="Type out your question here"></textarea>

It’s worth noting, also, that using the placeholder to replace a label means that any guidance offered is explicitly hidden once the user has focused, or entered data into, the field. If you don’t want the label elements visible all the time, then one way to show the guidance only while the input is focused is:

label {
    display: inline;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}

input:focus + label,
input:active + label {
    opacity: 1;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}​

Which triggers the reveal once the input is focused/active: JS Fiddle demo.