Text Input Field CSS Styling

Question

I have a text input field that has some sample text in a light gray font that I'm clearing when the user clicks to type in the field. When that happens I'd like to also change the font color to black so it's easier for the user to read what they are typing. Here is what I'm using so far:

<input type="text" name="q" value="Enter keywords" onfocus="if(this.value == 'Enter keywords') {this.value = '';}" style="width:630px;font-size:14px;color:#ADADAD;border:1px solid #ADADAD;}">

Is this possible using CSS and if so how do I update my text field to accomplish this. Thanks in advance for your help!

Answer 1

Simplest solution is:

<input type="text" name="q" value="Enter keywords" onfocus="if(this.value == 'Enter keywords') {this.value = '';this.style.color = '#000000';} else {this.style.color = '#000000';}" style="width:630px;font-size:14px;color:#ADADAD;border:1px solid #ADADAD;}">

But if you are interested in jQuery then...you could do magic.

Answer 2

try

<input type="text" name="q" value="Enter keywords" onfocus="if(this.value == 'Enter keywords') {this.value = ''; this.style.color = 'black';}" style="width:630px;font-size:14px;color:#ADADAD;border:1px solid #ADADAD;}">

Answer 3

In site the focus handler, try this.style.color = "#000000";