More than 5 years have passed since last update.

セレクトボックスのCSS適用が意外に難しい

Last updated at 2020-01-31Posted at 2019-10-25

shadowが消えない

↓ クリックすると shadow がつく

common.scss

.select:focus {
  box-shadow: none;
}

input の場合だとこれで消えるが、 select の場合はこれじゃ消えない

common.scss

.select:focus {
  outline: none;
}

button タグも select と同様のやり方で消えます。

矢印は↓ココのこと

common.scss

.select {
  border-radius: 0;
}

input の場合だとこれで十分だけど、なぜか select の場合はこれじゃ消えない

common.scss

.select {
  -webkit-appearance: none; //追加
  -moz-appearance: none;  //追加
  appearance: none; //追加
  border-radius: 0;
}

上記三行を追加して、セレクトボックスのそもそものデザインを初期化する必要があるらしい。
（appearance：プラットフォームにおける標準的なUIの外観にする）