オリジナルデザインのセレクトメニュー

フォームのパーツのデザインをオリジナルのものに変更するケース、結構あるかと思います。
その場合のアプローチとして、 appearance: none; を指定して、独自のスタイルをあてていくというものが一般的でしょう。

それがセレクトメニューの場合、右端にある「他にも選択肢あるよ〜、クリックしたら展開するよ〜」的なアイコンも、上記のcssによって消えてしまいます。
そのためプルダウン的なアイコンも自身で追加するのですが、その場合、私はfontawesomeを使うことが多いです。

fa-chevron-down: Font Awesome Icons

それでよしよしできたと思うわけですが、この場合アイコン部分はクリックしてもセレクトメニューが展開しないのです。

アイコンクリックしても展開しない

See the Pen icon not clickable by hiroaki tachibana (@eedamame) on CodePen.

最悪jsでアイコン部分をクリックした時にセレクトメニューにfocusさせて展開できないかなとか思ってたのですが、下記のstackoverflowを見つけました。

CSS :after content below a select element causes click not to work - Stack Overflow

カスタムアイコン部分にあたる、 ::after 疑似要素に対して、 pointer-events: none; を指定するというもの。

pointer-events ???

pointer-events 、よく知らなかったですが、どのような場合にマウスイベントの target となりうるかを制御するプロパティとのこと。
しかも、 値 none を指定した場合、その要素がマウスイベントのターゲットにならないだけでなく、マウスイベントはその要素の下にあるものへと「通過」します。 だって！？
pointer-events - CSS | MDN

なるほど！マウスイベントが透過してその下のセレクトメニューがクリックされたという状態になるため、デフォルトUIの時のようにびろーんと展開されるという訳でした。

こういうカスタムデザインを適用する場合はクリッカブルにならないのはしょうがないのかなと思っていて、 変にjsでゴニョゴニョやって検証が大変になったりするのは避けたいなと思ってたんですが、 cssで解決できたので、非常にスッキリした気持ち。
これでオリジナルデザインのフォームのパーツがきても怖くない！

しかもブラウザの対応も問題なさそう

Can I use… Support tables for HTML5, CSS3, etc

できた

See the Pen awesome clickable icon! by hiroaki tachibana (@eedamame) on CodePen.