Eti*_*ais 4 css jquery html5 placeholder
我遇到了一个问题,如果输入字段的背景颜色发生变化,占位符颜色会混入太多.
我已经解决了可读的文本颜色问题,因此它正确地返回正确的浅色或深色.
我不能为我的生活弄清楚如何将CSS属性设置为特定输入框的计算颜色.请给一些指导?
input:-moz-placeholder
{
color: #BBBBBB;
}
input::-webkit-input-placeholder
{
color: #BBBBBB;
}
Run Code Online (Sandbox Code Playgroud)
返回的颜色是#222222但$('#input').css()调用不起作用,因为它直接针对元素CSS而不是元素.
在这个解决方案中,我首先动态地将样式块附加到页面加载的<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);
Run Code Online (Sandbox Code Playgroud)
然后,要更改占位符文本颜色,我只需更新样式块的内容:
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);
Run Code Online (Sandbox Code Playgroud)
看看jsFiddle:
| 归档时间: |
|
| 查看次数: |
4057 次 |
| 最近记录: |