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

shadowが消えない

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

やりがちなCSS

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

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

実はこうです

.select:focus {
  outline: none;
}

border-radius が消えない（矢印も消えない）

矢印は↓ココのこと

やりがちなCSS

.select {
  border-radius: 0;
}

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

実はこうです

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

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

参考

http://www.htmq.com/css3/appearance.shtml
https://hacknote.jp/archives/9505/
http://nakagaw.hateblo.jp/entry/2015/06/18/164021