2020年03月30日

SelectBoxの初期状態をリセットする方法

お世話になっております。SeekNextの佐藤です。
今回はSelectBoxの初期状態をリセットする方法をみていきます。

色々とコーディングの仕事をしていると面倒臭いのがこのSelectBox。私は普段bootstrapを使用することが多いですが、bootstrapでのクラスを適用してもsafariで見ると以下のような見た目になってしまいます。

safariでの見た目
意図した見た目(chrom)

上記のように背景が灰色になってしまいます。これではデザイン上おかしいことも多々あるので、解決方法を記載します。

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  <!-- ここから下は任意に設定してください。 -->
  border: none;
  outline: none;
  background: #fff;
}

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

この部分を記載すると灰色の背景を消すことができます。borderやoutline、backgroundに関しては自由に設定して頂ければ問題ありません。

デザインにこだわるためにもこういった細かな部分にも気をつけてコーディングしていけば質が高くなるのではないでしょうか?

是非参考にしてみて下さい!