placeholderの色を変える方法

• 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);
}

☞ デモ

参考文献

• ::placeholder CSS pseudo-element - Can I use...