如何在输入框获得焦点时更改占位符的颜色? 我使用以下CSS代码设置默认颜色,但如何在获得焦点时更改它?
::placeholder { color: blue; }
如何在输入框获得焦点时更改占位符的颜色? 我使用以下CSS代码设置默认颜色,但如何在获得焦点时更改它?
::placeholder { color: blue; }
试试这个,应该可以运行:
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/
input:focus::placeholder {
color: blue;
}
完整且更新的(2021年)示例:
input::placeholder {
color: blue;
}
input:focus::placeholder {
color: green;
}
<label for="city">City:</label><br>
<input type="text" id="city" name="city" placeholder="your favorite city">
input:focus::-webkit-input-placeholder
{
color: red;
}
<input type='text' placeholder='Enter text' />
CSS
input[placeholder]:focus { color: red; }
$('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; }
*
来选择所有内容*::-webkit-input-placeholder { color: #999; }
*:-moz-placeholder { color: #999; }
*::-moz-placeholder { color: #999; }
*:-ms-input-placeholder { color: #999; }
input:focus::-moz-placeholder { color: transparent; }
<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/
:-ms-input-placeholder
而不是伪元素::-ms-placeholder
。无法测试焦点行为,因为IE默认在焦点上隐藏占位符(不幸的是我没有找到避免这种情况的方法)。请参见此更新的Fiddle。 - Linus Caldwell