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!

Nick Spiers · Accepted Answer · 2009-11-24 18:15:17Z

1

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;}">

answered Nov 24, 2009 at 18:15

Nick Spiers

2,3542 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Russell C. Over a year ago

@Nick - Worked like a charm. Thanks for the quick response!

Vincent Ramdhanie · Accepted Answer · 2009-11-24 18:15:02Z

0

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.

answered Nov 24, 2009 at 18:15

Vincent Ramdhanie

103k23 gold badges143 silver badges196 bronze badges

Comments

Chris Gutierrez · Accepted Answer · 2009-11-24 18:16:45Z

0

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

answered Nov 24, 2009 at 18:16

Chris Gutierrez

4,75522 silver badges18 bronze badges

Collectives™ on Stack Overflow

Text Input Field CSS Styling

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related