Geek asks and answers

Change the font color in a text box using CSS when a value is entered in a box

I have a text box that acts like a search box on my page. I pre-fill the field with the word “SEARCH”, which has the default text color # D6D6D0.

Using CSS, is it possible to change the text color to #FFFFFF when someone enters text in a field?

<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;
}
+5
source share
5 answers

The focus class pseudo-class should work

#searchFieldText:focus {
    color: #fff;
}
+7
source

Use is :focusapplicable only when the window is in focus, when the user leaves the text field, the color will be returned.

placeholder, placeholder #D6D6D0, , , .

placeholder psuedo:

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

, : http://jsfiddle.net/bM5AE/

+8

, , onblur , .

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

,

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

+4

:focus .

#searchFieldText:focus{
    color:#fff;   
}

placeholder , - (, ).

.

+1

hi , .

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

More articles:


All Articles