[解決済み] How do I style a <select> dropdown with only CSS?

Question

Is there a CSS-only way to style a <select> dropdown?

I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in CSS?

This code needs to be compatible with all major browsers:

• Internet Explorer 6, 7, and 8
• Firefox
• Safari

I know I can make it with JavaScript: Example .

And I'm not talking about simple styling. CSSだけで何ができるのか、それが知りたいのです。

私が見つけたのは 似たような質問 をStack Overflowに掲載しました。

そして これ をDoctype.comに掲載しました。

どのように解決するのですか？

ここでは、3つの解決策をご紹介します。

解決策1 - 外観：なし - Internet Explorer 10 - 11 での回避策 ( デモ )

--

デフォルトの矢印セットを非表示にするには appearance: none をselect要素に追加し、独自の矢印を background-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

ブラウザのサポート。

appearance: none は、ブラウザのサポートが非常に充実しています ( カニース Internet Explorerを除く）。

このテクニックを改良して、Internet Explorer 10 と Internet Explorer 11 に対応させるには

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

Internet Explorer 9が気になる場合、デフォルトの矢印を削除する方法はありませんが（矢印が2つになってしまう）、Internet Explorer 9のファンキーなセレクタを使用することができます。

少なくとも、カスタム矢印を元に戻し、デフォルトの選択矢印をそのままにすること。

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

みんなで一緒に

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}


/* CAUTION: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

この解決策は簡単で、ブラウザのサポートも充実しているので、一般的にはこれで十分でしょう。

Internet Explorerのブラウザサポートが必要な場合は、この先をお読みください。

解決策2 select 要素を切り捨てて、デフォルトの矢印を隠す ( デモ )

--

(詳しくはこちら)

ラップ select 要素をdivで囲み 固定幅 と overflow:hidden .

次に select 要素の幅を約 よりも20ピクセル大きく、div .

その結果、デフォルトのドロップダウン矢印の select 要素が非表示になります (これは overflow:hidden をコンテナ上に配置し、divの右側に好きな背景画像を配置することができます。

は 利点 この方法の特徴は、クロスブラウザ（Internet Explorer 8 以降。 WebKit および Gecko ). ただし デメリット この方法の場合、オプションのドロップダウンが右側に飛び出してしまいます（オプション要素が select 要素の幅を取るため、20ピクセル分隠しました）。

[ただし、カスタム select 要素を使用する必要があるのは モバイル デバイスの場合、各携帯電話のネイティブなselect要素の開き方のため、上記の問題は当てはまりません。つまり、モバイルでは、これが最適な解決策かもしれません。］

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(https://stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}

<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

Firefoxでカスタム矢印が必要な場合、以前は バージョン35 - しかし、Internet Explorerの古いバージョンに対応する必要はありません。

解決策その3 pointer-events プロパティ ( デモ )

--

(詳しくはこちら)

このアイデアは、ネイティブのドロップダウン矢印の上に要素をオーバーレイし（カスタム矢印を作成する）、その上でポインタイベントを無効にすることです。

利点は WebKitとGeckoでうまく動作します。見た目も良い（出っ張りがない option 要素を含む)。

デメリット Internet Explorer（Internet Explorer 10以下）は、以下の機能をサポートしていません。 pointer-events つまり、カスタム矢印をクリックすることはできません。また、この方法のもう一つの（明白な）欠点は、ホバー効果やハンドカーソルで新しい矢印画像をターゲットにすることができないことです。

しかし、この方法では、モダナイザーや条件付きコメントを使用して、Internet Explorer を標準の組み込み矢印に戻すことができます。

NB: Internet Explorer 10は conditional comments はもうありません。この方法を使用したい場合は、おそらく モダニズル . しかし、Internet Explorer 10 では、以下の CSS ハックによりポインターイベント CSS を除外することが可能です。 こちら .

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646E;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #DDD8DC;
  background: #FFF;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(https://stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}

<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->