CODEWITHSUNDEEP
htmlcssforms
Coolcrab
Coolcrab

Reputation: 2723

CSS text in forms that dissaprears when clicked?

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/

Upvotes: 0

Views: 97

Answers (2)

David Thomas
David Thomas

Reputation: 253358

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.

Upvotes: 1

thirdender
thirdender

Reputation: 3951

What you're looking for is the placeholder attribute. See David Walsh's article on HTML5 Placeholder Styling with CSS for both an example and styling information. The placeholder attribute has fairly good support, except in IE. You can able to use Javascript to re-create the effect of the placeholder attribute though… I like to use the Webshims lib to progressively polyfill HTML5 form functionality (including other attributes like type="date" and required="required").

Upvotes: 1

Related Questions