セレクトボックスの矢印を消すには？CSSでの変更方法

セレクトボックスの見た目を変えたい！という時ありませんか？

デフォルトのデザインだとあまりオシャレ感はありませんよね。周りのデザインに合わせてセレクトボックスも変更したいところ。

今回はCSSでセレクトボックスの見た目の変更方法や矢印の消し方をご紹介します！

矢印（▼）の消し方

消し方は簡単！appearance: none;とすれば矢印が非表示になります。
select::ms-expandはIE10以上に適用させるCSSです。

select {
　-webkit-appearance: none;
　-moz-appearance: none;
　appearance: none;
}
select::-ms-expand {
　display: none;
}

ちなみにappearanceは、UIの外観を変更する設定になります。
CSS3リファレンスに詳しく書かれています！

好みの見た目に近付けていく

矢印さえ消してしまえば、あとは好きなように変更していくだけです。
シンプルな形ですが一例を載せておきます。

HTML

<div>
  <select>
    <option value="ダミーダミー">ダミーダミー</option>
    <option value="ダミーダミー">ダミーダミー</option>
    <option value="ダミーダミー">ダミーダミー</option>
    <option value="ダミーダミー">ダミーダミー</option>
    <option value="ダミーダミー">ダミーダミー</option>
  </select>
</div>

CSS

div {
  position: relative;
  z-index: 1;
}
div select {
  border: 1px solid #efefef;
  padding: .75em 1em 1em;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
div select::-ms-expand {
　display: none;
}
div::after {
  position: absolute;
  z-index: 2;
  right: 11px;
  top: 30%;
  content: "▼";
  font-size: 15px;
  width: 20px;
  height: 20px;
  display: block;
  text-align: center;
}

こちらのCSSを当てると以下のようなセレクトボックスになります。
矢印がデフォルトのデザインから変わるだけで、少し雰囲気が変わったと思いませんか？

矢印ですが、疑似要素（::after）を使って▼を作り配置しています。背景画像で設定しても良いと思いますので、その辺りは実装しやすい方で行ってみて下さい！
[sc name=”fvpost”]

まとめ

このセレクトボックスの見た目変更は、残念ながらIE9以下は対応していないようなので切り捨てる必要がありますね。

もしお役に立っていただけたようであれば、いいね・シェアして頂けると嬉しいです！