将值输入框中时，使用 CSS 更改文本框中的字体颜色答案

【问题标题】：change font colour in textbox with CSS when value is typed into box将值输入框中时，使用 CSS 更改文本框中的字体颜色
【发布时间】：2013-01-08 07:40:55
【问题描述】：

我有一个文本框，它充当我页面上的搜索框。我使用默认文本颜色#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;
}

【问题讨论】：

标签： html forms css textbox

【解决方案1】：

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

【讨论】：

1) 他们不会专注于输入第一个字母 2) 支持不是很好，
1) true ;) 2) '
sry，但这是无稽之谈 - IE9 是您可以在 Vista 和 Windows 7（以及适用于 WinXP 的 IE8）上获得的最新浏览器。如果您正在认真地进行 Web 开发，则不能忽略对此浏览器的支持。
我在夸大其词，因为它有时会因各种不同的浏览器而令人沮丧
确实如此，尤其是 IE 实际上是唯一一个阻碍 Web 开发的工具：-/ 有时我梦想着 Web 开发者的梦想，一个只有一个浏览器支持所有标准而没有任何标准的世界错误：-D

【解决方案2】：

你好试试下面的代码它会工作....

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

焦点伪类应该可以工作

#searchFieldText:focus {
    color: #fff;
}

【讨论】：

【解决方案5】：

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

#searchFieldText:focus{
    color:#fff;   
}

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

See the example

【讨论】：