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颜色，并在文本框中应用您想要的样式。

您可以使用这些psuedo选择器覆盖placeholder样式：

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

我做了一个小提示，给你一个想法：http://jsfiddle.net/bM5AE/

Answer 3

你可以更好地使用占位符来预先填充字段，在输入时它们将会消失，如果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;  
}

Example

Answer 4

使用伪类:focus将为您解决问题。

#searchFieldText:focus{
    color:#fff;   
}

我还建议您使用新属性placeholder作为输入字段，这将为您带来一些魔力（但需要注意支持）。

See the example

Answer 5

嗨尝试以下代码，它将起作用....

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

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

5 个答案: