CODEWITHSUNDEEP
javascriptcss
designersvsoft
designersvsoft

Reputation: 1859

text field input color css

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?

Upvotes: 1

Views: 3151

Answers (4)

gaurang171
gaurang171

Reputation: 9080

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

Upvotes: 0

Anand
Anand

Reputation: 14915

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

http://jsfiddle.net/EvnQj/

Upvotes: 0

Mike S.
Mike S.

Reputation: 4869

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.

Upvotes: 0

Musa
Musa

Reputation: 97672

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

Upvotes: 2

Related Questions