リンク内(select)の疑似要素に画像を入れてもクリック可能にする

これよく陥りがちなので備忘録。

::before,::afterでselect要素に矢印を入れるときに、画像の部分だけリンクが効かなくて気持ち悪くなることが多い。

これほんと、z-indexで回避もできないし、backgroundで指定するにも、前後に要素があったりするとソース汚くなるし、疑似要素でどうしても対応したいってなる。

でも答えはめちゃ簡単！

cssにポインター無効の記述を追記！

.class label::after {
   position: absolute;
   top: 0;
   right: 0;
   content: url(../img/language_under.png);
   pointer-events: none;/* ←これです！*/}

以上でした。

画像の上にマウスが乗っかっても、画像が完全にスルーされて、select要素本来の動きがデザインに邪魔されず動きます。