Bootstrap使用時にplaceholder属性の文字色を変更する方法。
2016/11/02
Bootstrap使用時、HTML5の placeholder 属性の文字色を変更したい場合の方法を忘備録としてポストします。
placeholder属性のスタイル変更方法
フォーム例
|
1 2 3 4 |
<div class="form-group form-inline"> <label for="name_family"><span class="required">必須</span>お名前</label> <input type="text" class="form-control" size="10" placeholder="(例) 山田 太郎"> </div> |
bootstrapを使用していない場合
通常、placeholderのスタイルを変更する場合は以下のようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* for Webkit */ input::-webkit-input-placeholder{ color: #9f9f9f; font-size: 0.9em; } /* for Firefox */ input::-moz-placeholder{ color: #9f9f9f; font-size: 0.9em; } /* for Firefox 18以前 */ input:-moz-placeholder{ color: #9f9f9f; font-size: 0.9em; } /* for Windows IE */ input:-ms-input-placeholder{ color: #9f9f9f; font-size: 0.9em; } |
bootstrapを使用している場合
Bootstrapを使用している場合は、.form-controlをクラス指定することで幸せになれます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* for Webkit */ .form-control::-webkit-input-placeholder{ color: #9f9f9f; font-size: 0.9em; } /* for Firefox */ .form-control::-moz-placeholder{ color: #9f9f9f; font-size: 0.9em; } /* for Firefox 18以前 */ .form-control:-moz-placeholder{ color: #9f9f9f; font-size: 0.9em; } /* for Windows IE */ .form-control:-ms-input-placeholder{ color: #9f9f9f; font-size: 0.9em; } |