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 に答える