1. Qiita
  2. Items
  3. CSS

CSSだけで<select>をカスタマイズする

  • 232
    Like
  • 0
    Comment
More than 1 year has passed since last update.

Form系要素スタイルの初期化

ブラウザのForm系要素の初期スタイルをはがすときには、appearance: noneをあてつつ、backgroundborderなどのリセットをする。

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  box-sizing: content-box;
}

しかし<select>だと、WebKit系のを除けば、-moz-apperanceとしているFirefoxでさえも、選択のUIボタンが残っちゃう。

IE10

ie10.png

Firefox25

firefox.png

Opera12.16

opera.png

overflowでごまかす

先に結果をみせるとこんな感じ。

overflow.png

マークアップ例

<div class="custom">
  <select name="options">
    <option value="option-1">Option</option>
  </select>  
</div>

CSS(必要な部分のみ抜粋)

.custom {
  overflow: hidden; /* 伸ばした分を隠す */
}
.custom > select {
  width: 130%; /* UI分を伸ばす */
}

と、シンプルに対応できる。今のところは困ってない。

他のやり方

https://gist.github.com/joaocunha/6273016

Firefoxには、

select {
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}

IE10には、

select::-ms-expand {
  display: none;
}

ってのがあるそう。

Codepen

http://codepen.io/hiloki/pen/pwjsk