【CSS】Selectの矢印を擬似要素で作成した時、クリックしても反応しない場合の解決法

CSS

2022.07.09

セレクト要素に対して擬似要素などで矢印や三角などを自分で用意した時、その矢印をクリックしてもセレクトの選択メニューが開かずに困ったので、解決法をご紹介します。

ちなみにselectタグそのものには擬似要素が使えないので、今回のお話はselectタグをdivで囲い、divに対して擬似要素で矢印などを用意する、という前提のお話となります。

selectにデフォルトで付いている矢印の消し方、そして擬似要素や背景画像などを使った矢印の付け方についてはこちらの記事（現在執筆中）にて解説しています。

selectの擬似要素で作成した矢印をクリックしても反応しない場合の解決法

結論としては疑似要素に対して「pointer-events: none;」を指定します。これだけです。

/* selectをdivで囲んだものに擬似要素を作成する */
.select-form__wrap {
  position: relative;
  display: inline-block;
}

.select-form__wrap::after {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  border-top: transparent;
  border-right: transparent;
  border-bottom: 2px solid #3e3e3e;
  border-left: 2px solid #3e3e3e;
  transform: rotate(-45deg);
  top: 11px;
  right: 13px;
  pointer-events: none; /* ←これを指定する */
}

上記のように矢印をクリックしてもメニューが開く状態にすることができました。

なぜ「pointer-events: none; 」を指定するとメニューが開けるようになるのか、それは擬似要素で用意した矢印上でのクリックイベントをpointer-eventsでキャンセルすることで、その下にあるselectをクリックできるようになるらしく、selectをクリックしているのと同じことになるためメニューが開くことができるようになるようです。

詳しい挙動についてはこちらのブログが詳しそうなので、興味のある方は覗いてみて下さい。

正直selectはcssでのスタイルをつけるにあたりその内部構造が複雑らしく、私もよく理解してませんが、同じような症状で困っている人はこの方法をお試しください。