2016.05.02

【css】placeholderのみにcssを当てる

Category: css

Tags,

placeholderだけに別のスタイルを適用したい場合は、ブラウザ毎に3種類指定をする必要があります。

::-webkit-input-placeholder
:-ms-input-placeholder
::-moz-placeholder

以下のようにまとめて当てようとしても、適用されないので注意が必要です。
個別に書く必要があります。

/* 適用されない */
input::-webkit-input-placeholder,
input:-ms-input-placeholder,
input::-moz-placeholder {
color: #ccc;
}
/* 適用される */
input::-webkit-input-placeholder {
color: #ccc;
}
input:-ms-input-placeholder, {
color: #ccc;
}
input::-moz-placeholder {
color: #ccc;
}

参考リンク

Category : css