change font colour in textbox with CSS when value is typed into box

Question

I have a text box, which acts as a search box on my page. I pre-populate the field with the word 'SEARCH' which has a default text colour of #D6D6D0.

Using CSS, is it possible to change the text colour to #FFFFFF when someone enters text in the box?

<input type="text" name="q" value="SEARCH" id="searchFieldText">

#searchFieldText {
    background: url("/images/crmpicco/search_bg3.png") no-repeat scroll 0 0 #000000;
    border: medium none;
    color: #D6D6D0;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: 21px;
    padding-left: 0;
    padding-top: 3px;
    width: 168px;
}

Solution 1

The focus pseudo class should work

#searchFieldText:focus {
    color: #fff;
}

Solution 2

Using :focus will only apply when the box is currently in focus, when the user comes out of the text box the color will revert.

I would suggest using the placeholder attribute, override the styling for the placeholder to be the #D6D6D0 color you wanted and apply the style you want on the textbox.

You can override the placeholder styling with these psuedo selectors:

::-webkit-input-placeholder {
    color:    #D6D6D0;
}
:-moz-placeholder {
    color:    #D6D6D0;
}
::-moz-placeholder {
    color:    #D6D6D0;
}
:-ms-input-placeholder {
    color:    #D6D6D0;
}

I made a fiddle that gives you an idea: http://jsfiddle.net/bM5AE/

Solution 3

You can better use placeholder to pre-populate fields, on typing they will be gone, if onblur the field is empty the placeholder comes back.

<input type="text" name="q" placeholder="SEARCH" id="searchFieldText">

And if you wan't to style the placeholder

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder { /* Firefox 18- */
  color: red;  
}
::-moz-placeholder {  /* Firefox 19+ */
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}

Example

Solution 4

Using the pseudoclass :focus will do the trick for you.

#searchFieldText:focus{
    color:#fff;   
}

I also recommend you to use the new attribute placeholder for the input field which will do some magic for you (need to be aware of support however).

See the example

View more solutions

Comments

[Christoph]

1) they won't be gone on focus but on typing the first letter 2) it's support is not very nice, <=IE9 does not support it.

[Gijs]

1) true ;) 2) '<=IE9-people' are crazy and are holding back innovations. If we always have to support older browsers we will never get rid of them...

[Christoph]

sry, but that's nonsense - IE9 is the most recent browser you can get on Vista & Windows 7 (and IE8 for WinXP). If you are doing serious webdevelopment, you cannot ignore support for this browser(s).

[Gijs]

i was exaggerating, because it's sometimes very frustrating with all the different browsers going around

[Christoph]

that's true, especially with IE practically being the only one to stall the development of the web :-/ Sometimes I'm dreaming the webdeveloper's dream of a world with only one browser supporting all the standards without any bugs :-D