如何改变占位符颜色对焦点？

如何改变颜色的占位符时，重点输入字段？ 我使用这个 CSS 代码来设置默认颜色，但是如何改变它的 集中注意力？

::placeholder { color: blue; }
110266 次浏览
小开

试试这个:

超文本标示语言

<input type='text' placeholder='Enter text' />

CSS

input[placeholder]:focus { color: red; }
小开

试试这个，应该可以:

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/

小开

我用 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 的回答之外，我还用 textarea 兼容性对代码进行了改进:

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }


:focus::-webkit-input-placeholder { color: #ccc; }
:focus:-moz-placeholder { color: #ccc; }​
小开

来自 Firefox 19: 将表单元素与占位符属性匹配的:-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>

基本上，label 字段就像一个占位符，我们只能使用 css 来实现这一点。 在这里解释 http://www.voidtricks.com/create-material-design-animated-placeholder/

小开

以下几点对我很有效:

input:focus::-webkit-input-placeholder
{
color: red;
}
小开
最佳答案

这对我有用:

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::placeholder {
color: blue;
}

代码示例结果-

input::placeholder {
color: blue;
}


input:focus::placeholder {
color: red;
}
<input type="text" placeholder="text here">


提交答案