如何在jQuery设置后更改：-moz-placeholder color？

本文介绍了如何在jQuery设置后更改：-moz-placeholder color？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am running into a problem where if a input field's background color is changed, the placeholder color will blend in too much.

我已经解决了可读的文本颜色问题，所以它正确地返回适当的光或深色。

I have already solved the readable text color problem so it's returning the proper light or dark color correctly.

我无法为我的生活找出如何将CSS属性设置为特定输入框的计算颜色。请给一些信息？

I cannot for the life of me figure out how to set the CSS property to the calculated color for the specific input box. Please give some guidence?

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

返回的颜色是＃222222 但是 $（'＃input'）。css（）调用不工作，因为它直接定位元素CSS而不是元素。

The returned color is #222222 but the $('#input').css() call does not work since it targets the elements CSS directly and not the element.

推荐答案

在这个解决方案中，我首先动态地附加一个样式块到< head> on page load：

In this solution, I first dynamically append a style block to the <head> on page load:

// 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);

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

Then, to change the placeholder text color I just update the content of the style block:

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：

Check out the jsFiddle:

a href =http://jsfiddle.net/uEB2u/>使用jQuery 更改占位符文本颜色

Change placeholder text color with jQuery

这篇关于如何在jQuery设置后更改：-moz-placeholder color？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！