6

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

5 に答える 5

8

The focus pseudo class should work

#searchFieldText:focus {
    color: #fff;
}
于 2013-01-24T14:08:27.243 に答える
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/

于 2013-01-24T14:14:19.187 に答える
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

于 2013-01-24T14:14:25.610 に答える
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

于 2013-01-24T14:08:22.070 に答える
0

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

        $(document).ready(function () {
            $("#searchFieldText").keypress(function () {
                $("#searchFieldText").css("color", "#ffffff");
            });
        });
于 2013-01-24T14:19:13.570 に答える