Change font color when user clicks in input box

HTML & CSS
1

Hi

I have input on my web page that displays default text and clears this text once the user clicks in it.

What I would like to do is have the default text that displays when the input doesn’t have the focus to be a grey color
and once the user clicks in the input the text colors to black.

Where would I put this in this line?

<input type=“text” name=“linkedin” size=“20” maxlength=“40” value=“Add LinkedIn Link” onFocus=“if(this.value == ‘Add LinkedIn Link’) {this.value = ‘’;}” onBlur=“if (this.value == ‘’) {this.value = ‘Add LinkedIn Link’;}” />

Thanks.

Kath

2

Hi,

You’d do that in your css with something like this:


input[type='text']{color:#ccc;}
input[type='text']:focus{color:#000}

If you don’t want it to affect all inputs then add a class to the inputs concerned.
e.g.


<input class="highlight"  ...etc



input.highlight{color:#ccc;}
input.highlight:focus{color:#000}

In html5 you can use the placeholder attribute for safari and chrome and lose the inline javascript.