text field input color css

Question

I have a text filed in my form. The color of the text in the text field should be in grey color. If i click it and type, the text should turn black and remains to be in black color.

I used the following css.

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

This is my html code

<input name="address" id="address" type="text" onFocus="if(this.value =='Address' ) this.value=''" onBlur="if(this.value=='') this.value='Address'" value="Address">

Now the text turns to black color when i am typing. But it turns back to grey color after typing. I need it to be in black after typing. How can i do that?

so you mean you dont want to change the color of your text when typing and after typing right? — Kishore
– Kishore, Commented Jul 17, 2012 at 4:46
Why can't you use the placeholder attribute for the input field? — painotpi
– painotpi, Commented Jul 17, 2012 at 4:48

Musa · Accepted Answer · 2012-07-17 04:44:35Z

2

How about

<input name="address" id="address" type="text" 
       onFocus="if(this.value =='Address' )this.value='';this.style.color='#000';" 
       onBlur="if(this.value=='') this.value='Address'; if (this.value=='Address') this.style.color='#999';" 
       value="Address">

answered Jul 17, 2012 at 4:44

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

1 Comment

designersvsoft Over a year ago

Hi, one more help. If i click the reset button the input text should turn to grey again. Any suggestion?

Mike S. · Accepted Answer · 2012-07-17 04:46:12Z

0

Not sure your question is 100% clear but why don't you just reverse the values in your CSS?

<style>
input[type=text]{ color:#000;}
input[type=text]:focus{ color:#999999;}
</style>

<p>
<input name="address" id="address" type="text" onFocus="if(this.value =='Address' ) this.value=''" onBlur="if(this.value=='') this.value='Address'" value="Address">
</p>

With this the text is black and on focus it's gray but after focus it goes back to black.

answered Jul 17, 2012 at 4:46

Mike S.

4,8791 gold badge35 silver badges35 bronze badges

Comments

Anand · Accepted Answer · 2012-07-17 04:52:49Z

0

I have used JQuery to solve your problem. Please have a look at this JSFiddle

http://jsfiddle.net/EvnQj/

answered Jul 17, 2012 at 4:52

Anand

15k8 gold badges35 silver badges44 bronze badges

Comments

gaurang171 · Accepted Answer · 2012-07-17 05:19:51Z

0

For Above issue, please write HTML as below:

<input name="address" id="address" type="text" onFocus="if(this.value =='Address' ) this.value=''" onBlur="if(this.value==''){ this.value='Address'; } else{ this.style.color='#000'; }" value="Address">

CSS as it is:

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

and if you want to test your bin then http://codebins.com/bin/4ldqpaq

answered Jul 17, 2012 at 5:19

gaurang171

9,1104 gold badges31 silver badges30 bronze badges

Collectives™ on Stack Overflow

text field input color css

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related