placeholder属性の文字色を変更する
- 公開日:2016/2/15
この記事は最終更新日から8年以上が経過しています。
input要素のplaceholderにスタイルを適用します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* 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にも適用させるには、以下のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* 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を使用している場合は、以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* 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 ; } |