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

Jared · Accepted Answer · 2013-01-24 14:08:27Z

8

The focus pseudo class should work

#searchFieldText:focus {
    color: #fff;
}

answered Jan 24, 2013 at 14:08

Jared

12.5k1 gold badge37 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcus Recck · Accepted Answer · 2013-01-24 14:14:19Z

8

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/

answered Jan 24, 2013 at 14:14

Marcus Recck

5,0432 gold badges19 silver badges27 bronze badges

Comments

Gijs · Accepted Answer · 2013-01-25 09:11:16Z

4

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

edited Jan 25, 2013 at 9:11

answered Jan 24, 2013 at 14:14

Gijs

2,08216 silver badges22 bronze badges

5 Comments

Christoph Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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

Christoph Over a year ago

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

Christoph · Accepted Answer · 2013-01-24 14:08:22Z

1

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

answered Jan 24, 2013 at 14:08

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Comments

Pandian · Accepted Answer · 2013-01-24 14:19:13Z

0

hi Try the below code it will work....

        $(document).ready(function () {
            $("#searchFieldText").keypress(function () {
                $("#searchFieldText").css("color", "#ffffff");
            });
        });

answered Jan 24, 2013 at 14:19

Pandian

9,1562 gold badges26 silver badges34 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related