[英]How to change placeholder color on focus?
How to change the color of placeholder when focus the input field?聚焦输入字段时如何更改占位符的颜色? I use this CSS code to set the default color, but how to change it on focus ?
我使用此 CSS 代码设置默认颜色,但如何在焦点上更改它?
::placeholder { color: blue; }
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/
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; }
This works for me:这对我有用:
input:focus::placeholder {
color: blue;
}
The following worked for me:以下对我有用:
input:focus::-webkit-input-placeholder
{
color: red;
}
Try this:试试这个:
HTML HTML
<input type='text' placeholder='Enter text' />
CSS CSS
input[placeholder]:focus { color: red; }
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; }
Use star *
to select everything使用星号
*
选择所有内容
*::-webkit-input-placeholder { color: #999; }
*:-moz-placeholder { color: #999; }
*::-moz-placeholder { color: #999; }
*:-ms-input-placeholder { color: #999; }
从 Firefox 19 开始: :-moz-placeholder 伪类与具有 placeholder 属性的表单元素匹配已被删除,并添加了 ::-moz-placeholder 伪元素。
input:focus::-moz-placeholder { color: transparent; }
Complete and updated (2021) example:完整和更新 (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">
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.
我们只能使用 css 来做到这一点。 Explained here http://www.voidtricks.com/create-material-design-animated-placeholder/
在这里解释http://www.voidtricks.com/create-material-design-animated-placeholder/
Try this, It definitely works -试试这个,它绝对有效 -
input:focus::placeholder {
color: blue;
}
Code example result -代码示例结果 -
input::placeholder { color: blue; } input:focus::placeholder { color: red; }
<input type="text" placeholder="text here">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.