CODEWITHSUNDEEP
cssformstextinput
Russell C.
Russell C.

Reputation: 1659

Text Input Field CSS Styling

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!

Upvotes: 2

Views: 1510

Answers (3)

Chris Gutierrez
Chris Gutierrez

Reputation: 4755

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

Upvotes: 0

Nick Spiers
Nick Spiers

Reputation: 2354

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

Upvotes: 1

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103135

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.

Upvotes: 0

Related Questions