CSSのみで<select>ドロップダウンをスタイルする方法

Question

<select>ドロップダウンをスタイル設定するためのCSSのみの方法はありますか？

JavaScriptを使わずに、できるだけ<select>フォームをスタイルする必要があります。 CSSでこれを行うために使用できるプロパティは何ですか？

このコードは、すべての主要ブラウザと互換性がある必要があります。

• Internet Explorer 6、7、8
• Firefox
• サファリ

私はJavaScriptでそれを作ることができることを知っています： 例 。

そして私は単純なスタイリングについて話しているのではありません。 CSSだけで何ができるのか知りたいのですが。

似たような質問 Stack Overflowについて。

そして これ / Doctype.com上。

Answer 1

これが3つの解決策です。

解決策＃1 - 外観：なし - ie10-11回避策あり（ デモ ）

デフォルトの矢印を非表示にするには、select要素にappearance: noneを設定してから、background-imageを使用して独自のカスタム矢印を追加します。

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

ブラウザのサポート：

appearance: noneは非常に良いブラウザサポートを持っています（ caniuse ） - ie11-とfirefox 34-を除いて

このテクニックを改良し、ie10とie11のサポートを追加することで追加できます。

select::-ms-expand { 
    display: none; /* hide the default arrow in ie10 and ie11 */
}

Ie9が心配な場合 - デフォルトの矢印を削除する方法はありません（これで2つの矢印が表示されるようになります）が、カスタム矢印を元に戻すにはファンキーなie9セレクタを使用できます - デフォルトの選択矢印はそのまま無傷。

/* 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(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}


/* CAUTION: IE hackery ahead */


select::-ms-expand { 
    display: none; /* remove default arrow in IE 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>

この解決方法は簡単でブラウザのサポートも良好です - 一般的にはそれで十分です。

---

Ie9 - とFirefox 34 - のブラウザサポートが必要な場合は読み続けてください...

解決策2デフォルトの矢印を隠すためにselect要素を切り捨てる（ Demo ）

（もっと読む）

select要素を固定幅とoverflow:hiddenでdivで囲みます。

それからselect要素の幅を約divより20ピクセル大きいにします。

その結果、（コンテナのoverflow:hiddenのために）select要素のデフォルトのドロップダウン矢印が非表示になり、divの右側に任意の背景画像を配置できます。

このアプローチの 利点 は、クロスブラウザであることです（Internet Explorer 8以降、 WebKit 、および Gecko ）。しかしながら、このアプローチの デメリット はオプションドロップダウンが右側にはみ出していることです（隠した20ピクセル分...オプション要素はselectの幅を取るので）素子）。

[ただし、カスタムのselect要素が _ mobile _ devicesに対してのみ必要な場合は、上記の問題は適用されません - 各電話機が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(http://www.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 - 以前 - しかし、古いバージョンのIEをサポートする必要はありません。

解決策3 - pointer-eventsプロパティを使用する（ デモ ）

（もっと読む）

ここでの考え方は、要素をネイティブのドロップダウン矢印の上にオーバーレイし（カスタムのものを作成する）、その上にポインタイベントを許可しないことです。

利点： WebKitとGeckoでうまく動作します。見た目も良さそうです（option要素をはみ出していません）

デメリット： Internet Explorer（IE10以下）はpointer-eventsをサポートしていません。つまり、カスタム矢印をクリックできません。また、この方法のもう1つの（明らかな）欠点は、ポインタイベントを無効にしただけなので、ホバー効果やハンドカーソルで新しい矢印画像をターゲットにできないことです。

ただし、この方法では、Modernizerまたは条件付きコメントを使用してInternet Explorerを標準の組み込み矢印に戻すことができます。

NB： Internet Explorer 10はconditional commentsをもうサポートしていないので：このアプローチを使いたいのなら、おそらく Modernizr を使うべきです。ただし、 here と記述されているCSSハックを使用して、Internet Explorer 10からポインターイベント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(http://www.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]-->

Answer 2

それは可能ですが、残念ながら主にWebkitベースのブラウザでは、開発者として、私たちが必要とする範囲で可能です。これは、組み込みの開発者ツールインスペクタを介してChromeのオプションパネルから収集されたCSSスタイルの例です。最新のブラウザで現在サポートされているCSSプロパティと一致するように改善されました。

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */ 
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: Ellipsis;
    white-space: nowrap;
}

Webkitベースのブラウザ内の任意のページでこのコードを実行すると、選択ボックスの外観を変更し、標準のOS矢印を削除し、PNG矢印を追加し、ラベルの前後にスペースを入れます。

最も重要な部分はappearanceプロパティで、これは要素の振る舞いを変えます。

GeckoはappearanceやWebkitをサポートしていませんが、モバイルブラウザを含むほぼすべてのWebkitベースのブラウザで完璧に動作します。

Answer 3

Select要素とそのドロップダウン機能 は スタイル設定が困難です。

Chris Heilmannによるselect要素のスタイルの属性は、Ryan Doheryが最初の答えに対するコメントで述べたことを確認しています。

「select要素は、ブラウザのクロムではなく、オペレーティングシステムの一部です。そのため、スタイルを設定することは非常に信頼性が低く、とにかく試しても意味がありません。」

Answer 4

選択ドロップダウンのスタイルを設定するときに私が気付いた最大の矛盾はSafariおよび Google Chrome レンダリングです（FirefoxはCSSを通じて完全にカスタマイズ可能です）。曖昧なインターネットの深さを調べた結果、私は次のようなことに遭遇しました。これは、WebKitに関する私の問題をほぼ完全に解決します。

SafariとGoogle Chromeの修正 ：

select {
  -webkit-appearance: none;
}

ただし、これはドロップダウン矢印を削除します。背景、負の余白、または選択ドロップダウンの上に絶対位置を設定した近くのdivを使用してドロップダウン矢印を追加できます。

*より多くの情報と他の変数はCSSプロパティ：-webkit-appearanceで利用可能です。

Answer 5

<select>タグは、ブラウザでレンダリングされたHTMLページ上の他のHTML要素と同じようにCSSを通じてスタイルを設定できます。以下は、ページ上にselect要素を配置し、オプションのテキストを青で表示する（非常に単純な）例です。

HTMLファイルの例（selectExample.html）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="Apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

CSSファイルの例（selectExample.css）：

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}

Answer 6

私はこの正確な問題を抱えていましたが、私は画像を使うことができず、ブラウザのサポートによって制限されていませんでした。これは«スペック»になっていなければならず、幸運なことにあらゆるところで働き始めます やがて 。

疑似要素はselect要素では機能しないため、ドロップダウン矢印を「切り取る」ために、階層化された回転背景レイヤーを使用しています。

編集： /この更新版ではCSS変数と小さなテーマシステムを使っています。

:root {
  --radius: 2px;
  --baseFg: dimgray;
  --baseBg: white;
  --accentFg: #006fc2;
  --accentBg: #bae1ff;
}

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}

<select>
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-pink">
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-construction">
  <option>So many options</option>
  <option>...</option>
</select>

Answer 7

これは最近のすべてのブラウザで動作するバージョンです。キーはデフォルトのフォーマットを削除するappearance:noneを使用しています。すべての書式設定がなくなったので、選択と入力を視覚的に区別する矢印を追加し直す必要があります。

作業例： https://jsfiddle.net/gs2q1c7p/

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}

<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Answer 8

ブログの投稿どのようにCSSフォームドロップダウンスタイルJAVASCRIPTなしは私のために動作しますが、それは Opera で失敗します。

select {
    border: 0 none;
    color: #FFFFFF;
    background: transparent;
    font-size: 20px;
    font-weight: bold;
    padding: 2px 10px;
    width: 378px;
    *width: 350px;
    *background: #58B14C;
}

#mainselection {
    overflow: hidden;
    width: 350px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border-radius: 9px 9px 9px 9px;
    box-shadow: 1px 1px 11px #330033;
    background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
    <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    </select>
</div>

Answer 9

Bootstrap を使ってあなたのケースにたどり着きました。これは最も簡単な解決策です。

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1ex;
    background-Origin: content-box;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <form class="form-horizontal">
    <select class="form-control">
      <option>One</option>
      <option>Two</option>
    </select>
  </form>
</section>

注意：base64のものはSVGでは fa-chevron-down です。

Answer 10

select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}

Answer 11

最近のブラウザでは、CSSで<select>をスタイルするのは比較的簡単です。 appearance: noneで唯一のトリッキーな部分は矢印を置き換えることです（それがあなたが望むものなら）。これは、プレーンテキストのSVGとともにインラインのdata: URIを使用するソリューションです。

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  
  background-repeat: no-repeat;
  background-size: 0.5em auto;
  background-position: right 0.25em center;
  padding-right: 1em;
  
  background-image: url("data:image/svg+xml;charset=utf-8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
      <polygon points='0,0 60,0 30,40' style='fill:black;'/> \
    </svg>");
}

<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select style="font-size: 2rem;">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

その他のスタイル設定（ボーダー、パディング、色など）はかなり簡単です。

これは私が今試したすべてのブラウザ（Firefox 50、Chrome 55、Edge 38、そしてSafari 10）で動作する。 Firefoxに関する注意点の1つは、データURIで#文字を使用する場合（たとえばfill: #000）、それをエスケープする必要があることです（fill: %23000）。

Answer 12

clipプロパティを使用してselect要素の境界線と矢印をトリミングし、次にラッパーに独自の置換スタイルを追加します。

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
          body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green;  background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select>
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

ボタンをクリック可能にするには、不透明度がゼロの2番目の選択を使用します。

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
    
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

座標はWebkitと他のブラウザでは異なりますが、 @mediaクエリ でそれをカバーできます。

参考文献

• Dojo FXテスト：dojox.fx.ext-dojo.complex
• CSSマスキング：rect関数でクリッププロパティをテストし、auto値をボーダーボックスにクリップする

Answer 13

この要素を編集することはお勧めできませんが、試してみたい場合は他のHTML要素と同じです。

例を編集する：

/*Edit select*/
select {
    /*css style here*/
}

/*Edit option*/
option {
    /*css style here*/
}

/*Edit selected option*/
/*element  attr    attr value*/
option[selected="selected"] {
    /*css style here*/
}

<select>
    <option >Something #1</option>
    <option selected="selected">Something #2</option>
    <option >Something #3</option>
</select>

Answer 14

はい。次のように、任意のHTML要素をそのタグ名でスタイルすることができます。

select {
  font-weight: bold;
}

もちろん、他の要素と同様に、CSSクラスを使用してスタイルを設定することもできます。

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

Answer 15

トリックを行うために:afterと:beforeを使用する非常にいい例はCSS3によるスタイル選択ボックスです。 CSSDeck

Answer 16

Internet Explorer 10以降、 ::-ms-expand 疑似要素セレクタを使用して、ドロップダウン矢印要素をスタイル設定したり非表示にしたりすることができます。

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

残りのスタイルは他のブラウザと似ているはずです。

これはIE10のサポートを適用するDanieldのjsfiddleの基本的なフォークです

Answer 17

これが、このディスカッションで私が気に入ったアイデアに基づいた解決策です。これにより、追加のマークアップなしで要素を直接スタイル設定できます。

IE8 + 9用の安全な代替品でIE10 +を動作させます。これらのブラウザの注意点の1つは、背景画像を配置し、ネイティブの拡張コントロールの背後に隠れるように十分に小さくする必要があることです。

HTML

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for IE10+
// IE 8/9 get dafault arrow which covers caret image
// as long as caret image is small than and positioned
// behind default arrow
select::-ms-expand {
    display: none;
}

コーペン

http://codepen.io/ralgh/pen/gpgbGx

Answer 18

label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

これは、選択した要素に背景色を使用していて、画像を削除しました。

Answer 19

CSSのスタイル選択、optgroup、およびオプションのようにしてください。多くの点で、background-colorとcolorは、選択全体をスタイルするのではなく、オプションをスタイルするために通常必要なものだけです。

Answer 20

SELECTタグをスタイルする方法がISあります。

タグに「サイズ」パラメータがある場合は、ほとんどすべてのCSSが適用されます。このトリックを使用して、通常の選択タグと実質的に同等のフィドルを作成しました。さらに、ビジュアル言語ではComboBoxのように値を手動で編集できます（inputタグにreadonlyを付けない限り）。

そのため、背後にある原則を理解するための最小限の例を示します。
（クリック機構にはjQueryが必要です）：

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

        </select>
    </span>
</div>

ここにいくつかのより多くのスタイルをいじることがあります： https://jsfiddle.net/dkellner/7ac9us70/

（可能性を実証するためだけに、もちろんやり過ぎです。）

タグがそれらの下に属するオプションを通常のようにカプセル化していないことに注意してください。はい、これは意図的なものです、それはスタイリングのためです。 （礼儀正しいやり方では、それほど巧妙ではありません。）そしてそう、彼らはこのように完璧にうまくいっています。

NO-JSの部分を誰かが指摘する前に： 私は「Javascriptがない」という質問を知っています。私にとっては、これはもっとに似ています。プラグインを気にしないでください、彼らはそれを行うことができますが、私はネイティブな方法が必要です。理解された、プラグイン、余分なスクリプトが含まれていない、タグの "onclick"の中に収まるものだけ。ネイティブの "document.parentNode.getElementsByTagName"狂気を避けるために、唯一の依存関係はjQueryです。しかしそれはそのように働くことができます。そう、はい、これはネイティブのスタイルといくつかのonclickハンドラを持つネイティブのselectタグです。明らかに「Javascriptソリューション」ではありません。

楽しい！

Answer 21

ドロップダウンにホバースタイルを追加することもできます。

select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}

<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>

Answer 22

Danieldの回答の2番目の方法（ https://stackoverflow.com/a/13968900/280972 ）は、ホバー効果やその他のマウスイベントを処理するように改善できます。マークアップのselect要素の直後に "button"要素が来ることを確認してください。それから+ css-selectorを使ってターゲットにします。

HTML：

<select class="select-input">...</select>
<div class="select-button"></div>

CSS：

.select-input:hover+.select-button {
    [hover styles here]
}

ただし、これは、「ボタン」の上だけでなく、select-elementの上の任意の場所にマウスを移動したときのホバー効果を示します。

私はこのメソッドをAngularと組み合わせて使っています（私のプロジェクトはとにかくAngular-appであるため）、select-element全体をカバーし、Angularにテキストを表示させます。 "button"要素で選択されているオプションの説明。この場合、選択の上のどこかにホバーするとホバー効果が適用されることは完全に理にかなっています。 JavaScriptなしでは動作しません。そのため、これを行いたい場合、およびサイトがJavaScriptなしで動作する必要がある場合は、スクリプトに機能強化に必要な要素とクラスが追加されていることを確認する必要があります。このように、JavaScriptのないブラウザは、正しく更新されないスタイル付きバッジの代わりに、通常のスタイルなしのselectを取得するだけです。

Answer 23

CSSとHTMLのみの解決策

Chrome、Firefox、IE11と互換性があるようです。しかし、他のウェブブラウザに関してあなたのフィードバックを残してください。

@Danieldの回答で示唆されているように、私は期待した動作を得るためにdiv（xブラウザとの互換性のために2つのdivでさえ）で私のselectをラップします。

http://jsfiddle.net/bjap2/を参照してください /

HTML：

<div class="sort-options-wrapper">
    <div class="sort-options-wrapper-2">
        <select class="sort-options">
                <option value="choiceOne">choiceOne</option>
                <option value="choiceOne">choiceThree</option>
                <option value="choiceOne">choiceFour</option>
                <option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
        </select>
    </div>
    <div class="search-select-arrow-down"></div>
</div>

2 divラッパーに注目してください。また、あなたが好きな場所に絶対的な位置に矢印ボタンを配置するために追加されたdivが追加されていることに注目してください。ここでは左側に配置します。

CSS

.sort-options-wrapper {
    display: inline-block;
    position: relative;
    border: 1px solid #83837f;
}
/* this second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
    overflow: hidden;
}
select {
    margin-right: -19px; /* that's what hidding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;
    /* margin-top & margin-bottom must be set since some browser have default values for select elements */
    margin-bottom: 1px;
    margin-top: 1px;
}
select:focus {
    outline: none; /* removing default browsers outline on focus */
}
.search-select-arrow-down {
    position: absolute;
    height:10px;
    width: 12px;
    background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}

Answer 24

カスタムSelect CSSスタイル

テスト済みIE（10、11）、Edge、FF、Chrome

select::-ms-expand {
  display: none;
}
select {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em 0.5em 0.5em;
  border: 1px solid #eee;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 1em, right 10px top 1em;
  background-size: 5px 5px, 5px 5px;
}

<select name="">
  <option value="">Lorem</option>
  <option value="">Lorem Ipsum</option>
</select>

<select name="" disabled>
  <option value="">Disabled</option>
</select>

<select name="" style="color:red;">
  <option value="">Color!</option>
  <option value="">Lorem Ipsum</option>
</select>