placeholder属性の文字色を変更する

  • 公開日:2016/2/15
  • 最終更新日:2016/7/10
この記事は最終更新日から3年以上が経過しています。

input要素のplaceholderにスタイルを適用します。

/* Chrome, Safari */
input::-webkit-input-placeholder{
    color: #ff9900;
}

/* Firefox */
input::-moz-placeholder{
    color: #ff9900;
}

/* Firefox 18以前 */
input:-moz-placeholder{
    color: #ff9900;
}

/* IE */
input:-ms-input-placeholder{
    color: #ff9900;
}
  • Firefoxはバージョンにより2通りの書き方があって、微妙に違うので注意が必要です。
  • IE6〜IE9ではplaceholder属性が使えないのでjQueryプラグインを使用するなど別の方法が必要です。

input要素だけでなくtextareaにも適用させるには、以下のように記述します。

/* Chrome, Safari */
::-webkit-input-placeholder{
    color: #ff9900;
}

/* Firefox */
::-moz-placeholder{
    color: #ff9900;
}

/* Firefox 18以前 */
:-moz-placeholder{
    color: #ff9900;
}

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

Bootstrapを使用している場合は、以下のようになります。

/* Chrome, Safari */
.form-control::-webkit-input-placeholder{
    color: #ff9900;
}

/* Firefox */
.form-control::-moz-placeholder{
    color: #ff9900;
}

/* Firefox 18以前 */
.form-control:-moz-placeholder{
    color: #ff9900;
}

/* IE */
.form-control:-ms-input-placeholder{
    color: #ff9900;
}