青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

select要素のデフォルトのUIを消す 特にIEでは特殊な記述が必要

shinimae.hatenablog.com

基本的には、

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

これでいけるわけです。これでデフォルトで出る矢印のUIが消えてくれます。

しかし、IEではこれが効かない。

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

  &::-ms-expand {
    display: none;
  }
}

ここまで必要。select要素のこれ忘れがちな気がするので、要注意。レイアウトちょっと崩れるとかじゃなくて、もはやこちらで実装した矢印とデフォルトの2つ出てますみたいなのを初めてクライアントがIEで見て言われるみたいなの、あるからね…