いろは3021752 views
小学社会311307 views
高校物理161885 views
高校化学2930900 views
高校生物552825 views
数学講師2905779 views
高校倫理1443364 views
高校日本史190903 views
LaTeX964644 views
世界の国566722 views
Help
Tools

English

CSSでプレースホルダー(placeholder)の色を変える:ベンダープレフィックスをカンマつなぎでまとめて書かないようにしよう

CSS でプレースホルダーの色を変えるときは -webkit-input-placeholder などのベンダープレフィックスを使う。結論は次のコードである。

:-moz-placeholder {
color: #aaa;
opacity: 1;
}

::-moz-placeholder {
color: #aaa;
opacity: 1;
}

:-ms-input-placeholder {
color: #aaa;
}

::-ms-input-placeholder {
color: #aaa;
}

::-webkit-input-placeholder {
color: #aaa;
}

::placeholder {
color: #aaa;
}

これをまとめて書くと(少なくとも 2019.07.01 時点のクロームブラウザで)正常に動かない。つまり次のコードではプレースホルダーの色は変わらない。

:-moz-placeholder,
::-moz-placeholder {
color: #aaa;
opacity: 1;
}

:-ms-input-placeholder,
::-ms-input-placeholder,
::-webkit-input-placeholder,
::placeholder {
color: #aaa;
}

ベンダープレフィックスを使うときは別々にしたほうがいいようだ。