当值键入框时,使用CSS更改文本框中的字体颜色

Question

我有一个文本框,在我的页面上充当搜索框.我使用"搜索"一词预填充字段,其中默认文本颜色为#D6D6D0.

使用CSS,当有人在框中输入文本时,是否可以将文本颜色更改为#FFFFFF？

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

Answer 1

焦点伪类应该工作

#searchFieldText:focus {
    color: #fff;
}

Answer 2

使用:focus仅在框当前处于焦点时应用,当用户从文本框中退出时,颜色将恢复.

我建议使用该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/