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

Question

我有一个文本框，它在我的页面上充当搜索框。我预先填充该字段的单词为“SEARCH”，其默认文本颜色为#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;
}

- crmpicco

Answer 1

焦点伪类应该起作用

#searchFieldText:focus {
    color: #fff;
}

- Jared

Answer 2

使用: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/。

- Marcus Recck

Answer 3

您可以更好地使用占位符来预填充字段，在键入时它们将消失，如果在失焦时该字段为空，则占位符会重新显示。

<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

- Gijs

---

1. 它们不会在焦点上消失，而是在打出第一个字母时消失。
2. 它的支持不太好，<=IE9 不支持它。

- Christoph

1. 真的 ;)
2. “<=IE9的人”很疯狂，他们阻碍了创新。如果我们总是要支持旧版浏览器，我们永远无法摆脱它们...

- Gijs

抱歉，但那是无稽之谈 - IE9 是 Vista 和 Windows 7 上能获得的最新浏览器（WinXP 上为IE8）。如果您正在进行严肃的网站开发，您不能忽视对这种浏览器的支持。 - Christoph

我有点夸张了，因为各种不同的浏览器让人感到非常沮丧。 - Gijs

这是真的，特别是IE几乎是唯一阻碍Web发展的浏览器 :-/ 有时我会梦想着一个只支持所有标准且没有任何错误的浏览器的Web开发者的世界 :-D - Christoph

Answer 4

使用伪类:focus就能为你解决问题。

#searchFieldText:focus{
    color:#fff;   
}

我建议您在输入字段中使用新属性placeholder，它将为您执行一些魔法（但需要注意支持情况）。

查看示例

- Christoph

Answer 5

嗨，尝试下面的代码，它会起作用的...

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

- Pandian