CSSでplaceholderの文字色などのスタイルをカスタマイズする

placeholderとは

よく検索ボックスでキーワードを入力という文言を目にしたことがあると思います。これがplaceholderです。デフォルトでは、灰色をしていますが、このように紫色に変えたりすることができます。

placeholderのスタイル

/* Chrome, Safari 5+, Opera 15+, iOS, Android */
::-webkit-input-placeholder {
  color: #4527A0;
}
/* Firefox 18- */
:-moz-placeholder {
  color: #4527A0;
  opacity: 1;
}
/* Firefox 19+ */
::-moz-placeholder {
  color: #4527A0;
  opacity: 1;
}
/* IE 10+ */
:-ms-input-placeholder {
  color: #4527A0;
}
/* IE Edge */
::-ms-input-placeholder {
  color: #4527A0;
}

各ブラウザに対応させるとなると、このように長くなります。

/* Chrome, Safari 5+, Opera 15+, iOS, Android */
.class::-webkit-input-placeholder {
  color: #4527A0;
}
/* Firefox 18- */
.class:-moz-placeholder {
  color: #4527A0;
  opacity: 1;
}
/* Firefox 19+ */
.class::-moz-placeholder {
  color: #4527A0;
  opacity: 1;
}
/* IE 10+ */
.class:-ms-input-placeholder {
  color: #4527A0;
}
/* IE Edge */
.class::-ms-input-placeholder {
  color: #4527A0;
}

特定のクラスに適用させる場合は、このように擬似クラスの前にクラス名を書きます。