设置后如何使用 jQuery 更改 :-moz-placeholder 颜色？
Posted
技术标签:
【中文标题】设置后如何使用 jQuery 更改 :-moz-placeholder 颜色？【英文标题】：How do I change the :-moz-placeholder color with jQuery once it's set? 【发布时间】：2012-07-08 19:15:15 【问题描述】：我遇到了一个问题，如果输入字段的背景颜色发生变化，占位符颜色会混合太多。
我已经解决了可读文本颜色问题，因此它可以正确返回正确的浅色或深色。
我终其一生都无法弄清楚如何将 CSS 属性设置为特定输入框的计算颜色。请指导一下？
input:-moz-placeholder
color: #BBBBBB;
input::-webkit-input-placeholder
color: #BBBBBB;
返回的颜色是 #222222，但 $('#input').css() 调用不起作用，因为它直接针对元素 CSS 而不是元素。
【问题讨论】：
【参考方案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以上是关于设置后如何使用 jQuery 更改 :-moz-placeholder 颜色？的主要内容，如果未能解决你的问题，请参考以下文章