如果设置了jQuery，如何更改：-moz-placeholder颜色？

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

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

我不能为我的生活弄清楚如何将CSS属性设置为特定输入框的计算颜色。 请给一些指导？

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

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

Answer 1

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

 // add style block to the  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 = ''; $('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：

使用jQuery更改占位符文本颜色