Posted at
CSSDay 10

placeholderの色を変える方法

More than 1 year has passed since last update.


  • placeholderの色を変えるには、::placeholder疑似要素を使う。

  • IEをサポートするなら、:-ms-input-placeholder疑似クラスも使う。

  • Edgeをサポートするなら、::-ms-input-placeholder疑似要素も使う。

input::placeholder {

color: red;
}

/* IE */
input:-ms-input-placeholder {
color: red;
}

/* Edge */
input::-ms-input-placeholder {
color: red;
}

次のようにSCSSでmixin化してもよいだろう。

@mixin placeholder($color) {

&::placeholder {
color: $color;
}

// IE
&:-ms-input-placeholder {
color: $color;
}

// Edge
&::-ms-input-placeholder {
color: $color;
}
}

input {
@include placeholder(red);
}

デモ


参考文献