selectboxのCSS設定の謎を解け！

前置き

デザインHTML・CSSを適用している際、
selectboxに不思議なCSS設定があったので、共有がてらメモ

何が起こったか

• selectboxを押しても反応しない
• selectbox内の特定の選択肢がなぜか表示されない

selectboxを押しても反応しない

• クラスを消すと反応するようになっていた
• selectboxに直接設定されているCSS設定自体には妙な所が見当たらない

<select class="selectbox">
  <option value="">選択してください</option>
  <option value="東京都">東京都</option>
  ...
  <option value="北海道">北海道</option>
</select>

通常疑うところ

• JSのselectのイベントでpreventDefaultやreturn falseされている
• CSSでpointer-events: noneが設定されている

実際

• selectbox内のoptionにdisplay: noneが設定されていた。

optionの表示が消えてたらそりゃクリックしても反応ないよね！！！

多分JSで表示するかなにかするために消していたのだと想像（実際そんなことはなかったんだけど）

.selectbox > option {
  display: none;
}

解決策

• 上記設定を消す。

selectbox内の特定の選択肢がなぜか表示されない

上記とは別のHTMLの話です。

この構造を

<select class="selectbox">
  <option value="">選択してください</option>
  <option value="東京都">東京都</option>
  ...
  <option value="北海道">北海道</option>
</select>

下記のように変えたときに、なぜか「東京都」が消えました。
実は東京都どころではなく、各optgroupの最初の選択肢が消えていました。

<select class="selectbox">
  <option value="">選択してください</option>
  <optgroup label="関東">
    <option value="東京都">東京都</option>
    ...
  </optgroup>
  <optgroup label="北海道・東北">
    <option value="北海道">北海道</option>
    ...
  </optgroup>
</select>

原因

option:first-childなる無体なCSS設定が存在しました。やっぱり消してる。

.selectbox option:first-child {
  display: none;
}

こちらはクリックした時、「選択してください」の項目を表示させないために設定しているようでした。
しかし設定が雑です。

解決策

「選択してください」にクラスを当てて、

<select class="selectbox">
  <option class="option-default" value="">選択してください</option>
  <optgroup label="関東">
    <option value="東京都">東京都</option>
    ...
  </optgroup>
  <optgroup label="北海道・東北">
    <option value="北海道">北海道</option>
    ...
  </optgroup>
</select>

表示を消す。
元々やりたかったことを活かしつつ、構造が変わっても悪さをしなくなりました。

.option-default {
  display: none;
}

動く（動かない）コードサンプル

反応しなかったり、消えてるのが実際どんな感じなのかご覧いただけるようにしてます。

• https://codepen.io/yama-t/pen/ZgrmNJ

まとめ

• :first-childのような擬似クラスは便利だけど、構造が変わった時までカバーできない。
• 可能な限り、クラスを当てて明示的に指定した方が変なことにならない。
• 要素セレクタ指定で無闇にoption消さないで。