Font color change in textfield

Question

I have made some css styling for the textbox.

<div style="margin:10px">
<input type="text" value="Username" class="textbox3" onfocus="if(this.value=='Username')this.value=''" onblur="if(this.value=='')this.value='Username'">
</div>​​​​​​

and the CSS

.textbox3{
    color:#202020;
    padding:0 5px 0 10px;
    font-family: 'Source Sans Pro', sans-serif;
    height:30px;
    font-size:13px;
    margin:0;
    outline:none;
    border:1px solid #dbdbdb;
    border-radius:3px;
    width: 150px;
}
.textbox3:focus{
    color:#202020;
    border:1px solid #4e8abf;
}
.textbox3:focus, .textbox3{
 -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}​

Jsfiddle: http://jsfiddle.net/AWmUg/

But the default color of the text is dark grey. I wanted to change the color of this default text "Username" to a much lighter color say #cdcdcd and when we type any other text, it should be the dark grey. How can I get this result?

Answer 1

Use HTML5 new placeholder attribute instead, and use proprietary styles to have different color for placeholders and different color on and off focus

Demo

HTML

<input type="text" placeholder="Demo" />

CSS

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #ff0000;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #ff0000;
}

input:-ms-input-placeholder {
  color: #ff0000;
}

Answer 2

You could achieve a similar effect using the HTML5 placeholder attribute:

<input type="text" placeholder="Username"/>

See it in action in this fiddle: jsfiddle.net/3PLRA

There are lots of resources out there on this attribute, including how to provide JS fallback mehcanisms if the browser doesn't support HTML5.

In order to style the placeholder attribute, for example, take a look at Change an input's HTML5 placeholder color with CSS .

.textbox3::-webkit-input-placeholder {
    color:    #F00;
}
.textbox3:-moz-placeholder {
    color:    #F00;
}
.textbox3:-ms-input-placeholder {
    color:    #F00;
}

See an example in this fiddle

Answer 3

Using HTML5 you can use the placeholder attribute

See http://www.w3schools.com/tags/att_input_placeholder.asp for more info.

Browser that support HTML5 will do this for you.