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?

Have you considered using the HTML5 `placeholder` attribute instead? See http://jsfiddle.net/3PLRA/ — Xavi López, Dec 18 '12 at 14:13
You should try the placeholder attribute http://www.w3schools.com/html5/att_input_placeholder.asp — sambomartin, Dec 18 '12 at 14:14
And if you want to change the color of that placeholder you could use http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css — Gijs, Dec 18 '12 at 14:15

Mr. Alien · Accepted Answer · 2012-12-18T14:28:15.403

3

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

edited Dec 18 '12 at 14:28

answered Dec 18 '12 at 14:18

Mr. Alien

153,751
34
298
278

1

`:-ms-input-placeholder` for internet explorer – Gijs Dec 18 '12 at 14:22
oh yea, IE10...thanks for the reminder..finally IE getting in the game – Mr. Alien Dec 18 '12 at 14:27

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

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

edited May 23 '17 at 12:16

Community

1
1

answered Dec 18 '12 at 14:16

Xavi López

27,550
11
97
161

1

what about the different placeholder color? – Random Guy Dec 18 '12 at 14:21
@RandomGuy added link to related SO question and example. – Xavi López Dec 18 '12 at 14:26

sambomartin · Answer 3 · 2016-10-23T23:01:20.833

0

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.

edited Oct 23 '16 at 23:01

answered Dec 18 '12 at 14:16

sambomartin

6,663
7
40
64

the link you've given , does not work. Please update it. – ShaileshDev Oct 20 '16 at 10:26

Font color change in textfield

3 Answers3