Html 将值输入框中时，使用 CSS 更改文本框中的字体颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14503225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change font colour in textbox with CSS when value is typed into box
提问by crmpicco
I have a text box, which acts as a search box on my page. I pre-populate the field with the word 'SEARCH' which has a default text colour of #D6D6D0.
我有一个文本框，它充当我页面上的搜索框。我用“SEARCH”这个词预先填充了这个字段，它的默认文本颜色是#D6D6D0。
Using CSS, is it possible to change the text colour to #FFFFFF when someone enters text in the box?
使用 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;
}
回答by Jrod
The focus pseudo class should work
焦点伪类应该工作
#searchFieldText:focus {
color: #fff;
}
回答by Marcus Recck
Using :focuswill only apply when the box is currently in focus, when the user comes out of the text box the color will revert.
使用:focus时，包装盒是目前的焦点，当用户来到文本框的颜色就会恢复出将才适用。
I would suggest using the placeholderattribute, override the styling for the placeholderto be the #D6D6D0color you wanted and apply the style you want on the textbox.
我建议使用该placeholder属性，将样式覆盖为您想要placeholder的#D6D6D0颜色，并在文本框上应用您想要的样式。
You can override the placeholderstyling with these psuedo selectors:
您可以placeholder使用这些伪选择器覆盖样式：
::-webkit-input-placeholder {
color: #D6D6D0;
}
:-moz-placeholder {
color: #D6D6D0;
}
::-moz-placeholder {
color: #D6D6D0;
}
:-ms-input-placeholder {
color: #D6D6D0;
}
I made a fiddle that gives you an idea: http://jsfiddle.net/bM5AE/
我做了一个小提琴，给你一个想法：http: //jsfiddle.net/bM5AE/
回答by Gijs
You can better use placeholder to pre-populate fields, on typing they will be gone, if onblur the field is empty the placeholder comes back.
您可以更好地使用占位符来预填充字段，键入时它们将消失，如果 onblur 字段为空，则占位符会返回。
<input type="text" name="q" placeholder="SEARCH" id="searchFieldText">
And if you wan't to style the placeholder
如果你不想设置占位符的样式
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
回答by Christoph
Using the pseudoclass :focuswill do the trick for you.
使用伪类:focus将为您解决问题。
#searchFieldText:focus{
color:#fff;
}
I also recommend you to use the new attribute placeholderfor the input field which will do some magic for you (need to be aware of support however).
我还建议您对placeholder输入字段使用新属性，这将为您带来一些魔力（但是需要注意支持）。
回答by Pandian
hi Try the below code it will work....
嗨试试下面的代码它会工作....
$(document).ready(function () {
$("#searchFieldText").keypress(function () {
$("#searchFieldText").css("color", "#ffffff");
});
});
