user1012181 user1012181 - 1 month ago 20
CSS Question

Font color change in textfield

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

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