セレクトボックスの矢印をカスタマイズしたが機能しない場合の対処法

セレクトボックスをカスタマイズした際に、デザイン変更後あれれ、矢印が機能しない…?という事がありました。

::afterでデザイン矢印を付けてカスタマイズした場合に、
CSSで「pointer-events: none;」を指定することで、マウスの機能を無くしその下のselect boxを機能させることで簡単に対応ができたので、メモを残してしておきたいと思います!
Font Awesomeなどでafterの矢印を指定している場合などにも同様の方法でできます。

HTML

 
 

CSS

 
参考:CSSのappearanceを使ったセレクトボックスのカスタマイズ | design Edge