MENU

プレイスホルダーの色を設定するCSS

HTML/CSS

プレイスホルダーについてMDNでは以下のように書かれています。

プレイスホルダー文字列はふつう、どのような入力が正しいかという例を示すものであり、実際の入力ではないことを示すために、薄い色になっています。

プレイスホルダー文字列と入力欄の背景色のコントラスト比について確認すべき重要なことは、弱視の人が読むことができるために十分であることと同時に、プレイスホルダー文字列と入力テキストの差が違いが十分で、プレイスホルダー文字列が入力された文字列だと誤認されないようになっていることです。

引用元： https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder

HTMLでプレイスホルダーを設定するだけで薄い色で表示されます。

<input type="text" name="お名前" class="form__input" placeholder="氏名">
<input type="email" name="メールアドレス" class="form__input" placeholder="メールアドレス">
<input type="tel" name="電話番号" class="form__input" placeholder="電話番号">
目次

プレイスホルダーの色を設定する

デザインカンプからコーディングをする場合、プレイスホルダーの色もデザインカンプに合わせる必要があります。

以下のように設定すればOKです。

.form__input::placeholder {
	color: #999;　/* クラスを利用する場合 */
}

input::placeholder {
	color: #999;　/* タグを利用する場合 */
}

セレクト要素のプレイスホルダーを設定する

selectタグについてはinputタグのようにプレイスホルダーを設定することができません。

<select name="選択肢" id="select" class="form__select" required>
  <option value="" selected>選択してください</option>
  <option value="選択肢1">選択肢1</option>
  <option value="選択肢2">選択肢2</option>
  <option value="選択肢3">選択肢3</option>
</select>

CSSで以下のように設定します。

select.form__select {
  display: block;
  padding: 10px;
}

.form__select:invalid {
  color: #999; /* プレースホルダー的な色 */
}

.form__select:valid {
  color: red;  /* 選択されたときの色 */
}

See the Pen Untitled by Tomoka (@tomokoro) on CodePen.

※注意点１：上記デモのようにリセットCSSを使用していない場合、デフォルトの下向きの矢印も選択した要素として同時に色が変わります。ここら辺は別途カスタマイズが必要になります。

※注意点２：

<select> に対して :valid が効くのは、

  • required が指定されていて
  • value="" の option が選択されていないとき

のみ。

🔽このようにdisabled が設定してあると、cssが効きません。

<option value="" disabled selected>選択してください</option>

フォーム内の要素は色々複雑です、、！

HTML/CSS
よかったらシェアしてね！
  • URLをコピーしました！
目次