パソ君
・placeholderの色ってどうやって変えるの？
こんな疑問にお答えします。
お問い合わせフォームを作成するとき、inputタグなどにplaceholderを記載しますよね。
こんなやつ↓
この部分の色を案件によっては変えたい場合があるはず。
実はCSSにて簡単に変更可能です。
ジト
すぐにできるよ！
ということで、この記事では「placeholder（プレースホルダー）の色をCSSで変える方法」について解説していきます！
この記事でわかること
・placeholder（プレースホルダー）の色をCSSで変える方法
・placeholder（プレースホルダー）の色をCSSで変える方法【ブラウザ対応】
目次
【解説】placeholder（プレースホルダー）の色をCSSで変える方法【サンプルあり】
結論「::placeholder」をつけて記述すれば色の変更が可能。
こんな感じに↓
::placeholder {
color: #ccc;
}これだけでplaceholderのテキスト色を変更することができます。
先述した記述だと、全てに対してのplaceholderの色が変わってしまいます。
場所やタグによって色を別々にしたい場合は、タグ別・クラスに対して記述すればOK。
// inputタグのplaceholderに対して
input::placeholder{
color: #ccc;
}
// textareaタグのplaceholderに対して
textarea::placeholder{
color: burlywood;
}
// .hogeクラスのplaceholderに対して
.hoge::placeholder{
color: #000066;
}それぞれのplaceholderのテキスト色が変わってますよね↓
See the Pen Untitled by jito-coder (@jito-coder) on CodePen.
<table>
<tr>
<th>お名前</th>
<td><input type="text" name="" class="hoge" placeholder="田中 太郎"/></td>
</tr>
<tr>
<th>電話番号</th>
<td><input type="text" name="" placeholder="000-0000-0000"/></td>
</tr>
<tr>
<th>お問い合わせ</th>
<td><textarea name="" cols="50" rows="5" placeholder="お問い合わせ内容が入ります"></textarea></td>
</tr>
</table>// inputタグのplaceholderに対して
input::placeholder{
color: #ccc;
}
// textareaタグのplaceholderに対して
textarea::placeholder{
color: burlywood;
}
// .hogeクラスのplaceholderに対して
.hoge::placeholder{
color: #000066;
}
【解説】placeholder（プレースホルダー）の色をCSSで変える方法【ブラウザ対応】
placeholderのCSSの記述を、ブラウザ対応する場合は下記のような記述をします。
// 旧Edgeに対応する場合
::-ms-input-placeholder {
color: #ccc;
}
// IEに対応する場合
:-ms-input-placeholder {
color: #ccc;
}【解説】placeholder（プレースホルダー）の色をCSSで変える方法【サンプルあり】：まとめ
- 「::placeholder」をつければ実装可能
- タグやクラスに対してつければ場所別に対応可能
- ブラウザ対応用の記述方法もある
ジト
placeholderの色を変える実装はよく使うので覚えておこう！
