More than 3 years have passed since last update.

form の selectタグの右の矢印を復活させる（reset cssで消えて困りの方に向けて）

Last updated at 2020-05-27Posted at 2018-07-20

リセットCSSの効能

ブラウザがあらかじめ持っている見出しやフォームUIのデザインを初期化して、異なるブラウザでも見た目が統一できるようにするCSSですね。

とあるweb制作案件で、リセットCSS に sanitize.css を選択しました。

sanitize.cssはformのUI部品のデザインがほとんどリセットされます。
問い合わせフォームを組み込む際はinput,select,textareaのスタイルをいちからデザインできます。

select {
  -moz-appearance: menulist;
  -webkit-appearance: menulist;
}

これでIE,Edge以外のたいていのブラウザは戻せる。

しかし、IE,Edgeは、右の矢印が消えたままで、セレクトボックスであることがわかりにくい状態。

select::-ms-expand {
    display: block;
}

::-ms-expandはMS独自の擬似要素だそうです。