4

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

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

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

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

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

4

1 回答 1

6

在此解决方案中，我首先在页面加载时将样式块动态附加到 <head> ：

// 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：

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

于 2012-07-09T13:24:04.653 回答