2015.2.28

selectボックスをカスタマイズ FirefoxなどのデフォルトUIを消す方法

こんにちは。しゃげあきです。
selectボックスのデフォルトのUIを変更したい場合って多いですよね。
基本的にはcssでappearance: none;border: 0;のようにしてスタイルを初期化させます。

select {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

しかし、FirefoxなどでデフォルトのUIが残る…

上記ほかに、Form系のスタイルリセットとして、

select {
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  box-sizing: content-box;
}

いろいろやってみますが、Webkit系のブラウザを除いて、
IE10、Firefox36、Opera 27.0、消えません。。

一番確実な方法はJSでスタイルを変更する方法なのかもしれないですが、
CSSだけで変更する方法もあります。

overflow: hiddenで消す

あまりスマートなやり方には感じられませんが、
以下のようにしてデフォルトのUIのボタンアイコンを消します。

<div class="select_wrap">
  <select name="sample">
    <option value="1"></option>
  </select>
</div>
.select_wrap {
  overflow: hidden;
  width:200px;
}

.select_wrap select {
  width: 150%;
}

簡単に説明すれば、selectを囲んでいる要素で、表示領域を定め、select自身にはその表示領域をはみだすようにwidthを指定してあげるということです。

387879wea

これでoverflow:hiddenで消えました。
後は好きなようにスタイルを加えてデザインを変更させましょう。

以上、セレクトボックスのカスタマイズ方法でした。

参考サイト