6

我有一个文本框，它充当我页面上的搜索框。我使用默认文本颜色#D6D6D0 的单词“SEARCH”预先填充该字段。

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

5 回答 5

8

使用:focus仅在框当前处于焦点时适用，当用户离开文本框时，颜色将恢复。

我建议使用该placeholder属性，将样式覆盖为您想要placeholder的颜色并在文本框上应用您想要的样式。#D6D6D0

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

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

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

于 2013-01-24T14:14:19.187 回答
8

焦点伪类应该可以工作

#searchFieldText:focus {
    color: #fff;
}
于 2013-01-24T14:08:27.243 回答
4

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

例子

于 2013-01-24T14:14:25.610 回答
1

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

#searchFieldText:focus{
    color:#fff;   
}

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

看例子

于 2013-01-24T14:08:22.070 回答
0

嗨试试下面的代码它会工作....

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