Html 如何更改焦点上的占位符颜色?
聚焦输入字段时如何更改占位符的颜色? 我使用这个css来设置默认颜色,但是如何更改焦点呢Html 如何更改焦点上的占位符颜色?,html,css,colors,focus,placeholder,Html,Css,Colors,Focus,Placeholder,聚焦输入字段时如何更改占位符的颜色? 我使用这个css来设置默认颜色,但是如何更改焦点呢 ::-webkit-input-placeholder { color: #999; } /* Firefox < 19 */ :-moz-placeholder { color: #999; } /* Firefox > 19 */ ::-moz-placeholder { color: #999; } /* Internet Explorer 10 */ :-ms-input-plac
::-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; }
::-webkit输入占位符{color:#999;}
/*Firefox<19*/
:-moz占位符{color:#999;}
/*Firefox>19*/
:-moz占位符{color:#999;}
/*Internet Explorer 10*/
:-ms输入占位符{颜色:#999;}
试试这个:
HTML
试试这个,这个应该可以:
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;
}
input::-webkit输入占位符{
颜色:#999;
}
输入:焦点::-webkit输入占位符{
颜色:红色;
}
/*Firefox<19*/
输入:-moz占位符{
颜色:#999;
}
输入:焦点:-moz占位符{
颜色:红色;
}
/*Firefox>19*/
输入::-moz占位符{
颜色:#999;
}
输入:焦点::-moz占位符{
颜色:红色;
}
/*Internet Explorer 10*/
输入:-ms输入占位符{
颜色:#999;
}
输入:焦点:-ms输入占位符{
颜色:红色;
}
下面是一个示例:我用JQuery找到了这个解决方案:
$('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; }
除了Pranav answer,我还使用textarea兼容性改进了代码:
::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }
:focus::-webkit-input-placeholder { color: #ccc; }
:focus:-moz-placeholder { color: #ccc; }
从Firefox19:
已删除与具有占位符属性的表单元素匹配的:-moz占位符伪类,并添加了::-moz占位符伪元素
input:focus::-moz-placeholder { color: transparent; }
使用星号
*
选择所有内容
*::-webkit-input-placeholder { color: #999; }
*:-moz-placeholder { color: #999; }
*::-moz-placeholder { color: #999; }
*:-ms-input-placeholder { color: #999; }
可以创建一个材质设计动画占位符,该占位符在聚焦输入字段时在顶部收缩
<div class="field">
<input type="text" name="user" required><br>
<label>Enter Username</label>
</div>
输入用户名
基本上,标签字段将起到占位符的作用。我们只能使用css来实现这一点。
这里解释了以下几点对我有用:
input:focus::-webkit-input-placeholder
{
color: red;
}
这对我很有用:
input:focus::placeholder {
color: blue;
}
这是没有必要的,但我怀疑这是因为,在进一步检查时,您的代码会在焦点上显示输入的实际值,而不仅仅是其占位符文本。为什么没有:-ms input placeholder?我没有IE来测试上述内容,如果有人能测试它,那就太好了。哎呀,IE9缺少占位符支持:对我来说就像一个符咒。显然,没有在IE中进行测试。不,遗憾的是,它在IE 10中不起作用,因为IE使用伪类
:-ms-input-placeholder
,而不是伪元素:-ms-placeholder
。无法测试焦点行为,因为IE默认会在焦点上隐藏占位符(不幸的是,我没有找到避免这种情况的方法)。JQuery是美丽的,但必须消亡。每件事都有开始,也有结束,@davidepalmieriwhat you on@BoltClock。当然,它需要jQuery…如果有什么需要的话,它需要moar jQuery!注意:由于某些原因,不能使用逗号应用多个规则。这些必须单独声明,如图所示。(虽然您现在可能只需要ms输入和::占位符)谢谢!这起作用了。
input:focus::-webkit-input-placeholder
{
color: red;
}
input:focus::placeholder {
color: blue;
}