placeholder属性の文字色を変更する
- 公開日:2016/2/15
この記事は最終更新日から8年以上が経過しています。
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; }