如何更改重点的占位符颜色？
如何改变占位符的颜色，当焦点input字段？ 我用这个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; } 尝试一下，这应该工作：
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; }
这里是一个例子： http : //jsfiddle.net/XDutj/27/
除了Pranav答案，我用textarea兼容性改进了代码：
::-webkit-input-placeholder { color: #999; } :-moz-placeholder { color: #999; } :focus::-webkit-input-placeholder { color: #ccc; } :focus:-moz-placeholder { color: #ccc; }
尝试这个：
HTML
<input type='text' placeholder='Enter text' />
CSS
input[placeholder]:focus { color: red; }
我用JQuery发现了这个解决scheme：
$('input[type="text"]').each(function(){ $(this).focus(function(){ $(this).addClass('input-focus'); }); $(this).blur(function(){ $(this).removeClass('input-focus'); }); });
用这个CSS：
.input-focus::-webkit-input-placeholder { color: #f00; } .input-focus:-moz-placeholder { color: #f00; } .input-focus:-ms-input-placeholder { color: #f00; }
从Firefox 19开始：与占位符属性匹配的表单元素的-moz-placeholder伪类已被删除，而添加了:: – moz-placeholder伪元素。
input:focus::-moz-placeholder { color: transparent; }
使用星号*来select一切
*::-webkit-input-placeholder { color: #999; } *:-moz-placeholder { color: #999; } *::-moz-placeholder { color: #999; } *:-ms-input-placeholder { color: #999; }
您可以创build一个材质devise的animation占位符，当input字段为焦点时，缩放在顶部。
<div class="field"> <input type="text" name="user" required><br> <label>Enter Username</label> </div>
基本上，标签字段将像一个占位符。 我们只能使用CSS来做到这一点。 在这里解释http://www.voidtricks.com/create-material-design-animated-placeholder/
