Html 如何更改焦点上的占位符颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13183421/
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
How to change placeholder color on focus?
提问by Davide
How to change the color of placeholder when focus the input field? I use this css to set the default color, but how to change it on focus?
聚焦输入字段时如何更改占位符的颜色？我使用这个 css 来设置默认颜色，但是如何在焦点上更改它？
::-webkit-input-placeholder { color: #999; }
/* Firefox < 19 */
:-moz-placeholder { color: #999; }
/* Firefox > 19 */
::-moz-placeholder { color: #999; }
/* Internet Explorer 10 */
:-ms-input-placeholder { color: #999; }
回答by Pranav ?
Try this, this should work :
试试这个，这应该有效：
input::-webkit-input-placeholder {
color: #999;
}
input:focus::-webkit-input-placeholder {
color: red;
}
/* Firefox < 19 */
input:-moz-placeholder {
color: #999;
}
input:focus:-moz-placeholder {
color: red;
}
/* Firefox > 19 */
input::-moz-placeholder {
color: #999;
}
input:focus::-moz-placeholder {
color: red;
}
/* Internet Explorer 10 */
input:-ms-input-placeholder {
color: #999;
}
input:focus:-ms-input-placeholder {
color: red;
}
Here is an example : http://jsfiddle.net/XDutj/27/
这是一个例子：http: //jsfiddle.net/XDutj/27/
回答by Davide
In addition to Pranav answer I refined the code with textarea compatibility:
除了 Pranav 答案之外，我还改进了具有 textarea 兼容性的代码：
::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }
:focus::-webkit-input-placeholder { color: #ccc; }
:focus:-moz-placeholder { color: #ccc; }?
回答by Ari
Use star *to select everything
使用星号*选择所有内容
*::-webkit-input-placeholder { color: #999; }
*:-moz-placeholder { color: #999; }
*::-moz-placeholder { color: #999; }
*:-ms-input-placeholder { color: #999; }
回答by Kevin Boucher
Try this:
尝试这个：
HTML
HTML
<input type='text' placeholder='Enter text' />
CSS
CSS
input[placeholder]:focus { color: red; }
回答by Davide
I've found this solution with JQuery:
我用 JQuery 找到了这个解决方案：
$('input[type="text"]').each(function(){
$(this).focus(function(){
$(this).addClass('input-focus');
});
$(this).blur(function(){
$(this).removeClass('input-focus');
});
});
with this css:
使用这个 css：
.input-focus::-webkit-input-placeholder { color: #f00; }
.input-focus:-moz-placeholder { color: #f00; }
.input-focus:-ms-input-placeholder { color: #f00; }
回答by Bel
The following worked for me:
以下对我有用：
input:focus::-webkit-input-placeholder
{
color: red;
}
回答by Leszek Pietrzak
From Firefox 19: The :-moz-placeholder pseudo-class that matches form elements with the placeholder attribute has been removed, and the ::-moz-placeholder pseudo-element has been added instead.
从 Firefox 19 开始：删除了匹配具有 placeholder 属性的表单元素的 :-moz-placeholder 伪类，并添加了 ::-moz-placeholder 伪元素。
input:focus::-moz-placeholder { color: transparent; }
回答by Anand Roshan
You can create a material design animated placeholder that shrinks on top when input field is focused.
您可以创建一个 Material Design 动画占位符，当输入字段被聚焦时，它会在顶部收缩。
<div class="field">
<input type="text" name="user" required><br>
<label>Enter Username</label>
</div>
Basically the label field is going to act like a placeholder. We can do this only using css. Explained here http://www.voidtricks.com/create-material-design-animated-placeholder/
基本上，标签字段将充当占位符。我们只能使用 css 来做到这一点。在这里解释http://www.voidtricks.com/create-material-design-animated-placeholder/
