MENU
CLOSE
システム Edit : 2020.05.18 Update : 2024.11.07
セレクトボックスの矢印をカスタマイズしたが機能しない場合の対処法

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

Contents
  1. HTML
  2. CSS

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

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

Contents
  1. HTML
  2. CSS

HTML

 

CSS


Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。