web-dev-qa-db-ja.com

「プレースホルダー」テキストの色を設定する方法は？

placeholderテキストの色を設定することは可能ですか？

<textarea placeholder="Write your message here..."></textarea>
htmlcsshtml5colors
25
Misha Moroshko

「この回答を参照する」という回答を好む人はいませんが、この場合は役立つかもしれません： CSSでHTML5入力のプレースホルダーカラーを変更する

いくつかのブラウザでのみサポートされているため、jQueryプレースホルダープラグインを試すことができます（jQueryを使用できる場合）。これは、実際にはフォーカスイベントで行うスワップトリックに過ぎないため、CSSを介してプレースホルダーテキストのスタイルを設定できます。

ただし、プラグインはそれをサポートするブラウザーではアクティブにならないため、chrome\firefoxおよびjQueryプラグインのCSSをターゲットとするCSSを使用して、残りをキャッチできます。

プラグインはここにあります： https://github.com/mathiasbynens/jquery-placeholder

21
Vassi
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}
27
HasanAboShally

これを試して

textarea::-webkit-input-placeholder {  color: #999;}
11
Suresh Pattu

プレースホルダーに色を付けるには、次のコード行を使用します。

::-webkit-input-placeholder { color: red; }
::-moz-placeholder {color: red; }
:-ms-input-placeholder { color: red; } 
:-o-input-placeholder { color: red; }
6
daraptoor
#Try this:

input[type="text"],textarea[type="text"]::-webkit-input-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]:-moz-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]::-moz-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]:-ms-input-placeholder {
    color:#f51;
}

##Works very well for me.
3
Ankit Pundhir