设置后如何使用 jQuery 更改 :-moz-placeholder 颜色？答案

【问题标题】：How do I change the :-moz-placeholder color with jQuery once it's set?设置后如何使用 jQuery 更改 :-moz-placeholder 颜色？
【发布时间】：2012-07-08 19:15:15
【问题描述】：

我遇到了一个问题，如果输入字段的背景颜色发生变化，占位符颜色会混合太多。

我已经解决了可读文本颜色问题，因此它可以正确返回正确的浅色或深色。

我终其一生都无法弄清楚如何将 CSS 属性设置为特定输入框的计算颜色。请指导一下？

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

返回的颜色是 #222222，但 $('#input').css() 调用不起作用，因为它直接针对元素 CSS 而不是元素。

【问题讨论】：

标签： jquery css html placeholder

【解决方案1】：

在这个解决方案中，我首先在页面加载时将样式块动态附加到

：

// add style block to the <head> with default placeholder css on page load
var defaultColor = 'BBBBBB';
var styleContent = 'input:-moz-placeholder {color: #' + defaultColor + ';} input::-webkit-input-placeholder {color: #' + defaultColor + ';}';
var styleBlock = '<style id="placeholder-style">' + styleContent + '</style>';
$('head').append(styleBlock);

然后，要更改占位符文本颜色，我只需更新样式块的内容：

var randomColor = Math.floor(Math.random()*16777215).toString(16);
styleContent = 'input:-moz-placeholder {color: #' + randomColor + ';} input::-webkit-input-placeholder {color: #' + randomColor + ';}'
$('#placeholder-style').text(styleContent);

查看 jsFiddle：

Change placeholder text color with jQuery

【讨论】：

非常感谢您提供这个出色的解决方案。它就像一个魅力：D