【CSS】selectの枠線・矢印を消す方法

CSSでselectをデザインする時、邪魔だなと思う枠線と矢印。
そんな枠線、矢印を消す方法のご紹介です。

初めての目次

selectの枠線を消すCSS
selectの矢印を消すCSS

selectの枠線を消すCSS

select {
  outline: none;
}

あまり聞いたことないスタイルプロパティの「outline」ですが「outline」には、
「outline-color」、「outline-style」、「outline-width」が含まれ、アウトラインのスタイルと太さ、色の指定が可能です。
「outline: none」は、「outline」の中の「outline-style」を指定しており
「none」の他には、「solid（1本線）」、「double(2本線)」、「grooveまたはinset(立体的なへこんだ線)」、「ridgeまたはoutset(立体的に突起した線)」、「dashed(破線)」、「dotted(点線)」があります。
もし表示指定する場合は、ご参考にしてください。

selectの矢印を消すCSS

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* ie対応 */
select::-ms-expand {
  display: none;
}

矢印を消す方法は「appearance: none;」だけでは上手くいかず
ベンダープレフィックスの対応とインターネットエクスプローラー（ie）用に別の指定もしなくちゃいけません。
少し記述が多くなってしまいますがこれを書けばselectの矢印が全ブラウザで消えます。
以上です！