こういうセレクトボックスを作りたかった

▼の部分はCSSで作った装飾です。標準の<select>タグをスタイリングしたものの上に置いてる感じ。

┌───────┐
│　　　▼ │
└───────┘

当たり判定

ただ、標準のセレクトボックスのUIの上にCSSで装飾した▼を乗せると、その部分をクリックしてもセレクトボックスの当たり判定がなくなってしまうという問題に直面した。。。

pointer-events: none;を上に置いた装飾に当てれば問題なくセレクトボックスとして使える！

これを覚えておけばz-indexが上のDOMを置いて、当たり判定をなくすということもできるので結構便利な気がします。

プロパティの値はauto と none以外はSVG専用みたいですね。。。こっちはちょっとよくわかんないですけどとりあえずnone覚えておくと便利な気がします。。。。（２回目）

appearance: noneで標準UIの▼みたいなやつを消せます。これもセットで使えば標準selectのスタイリングができていい感じです。