以下に 3 つの解決策を示します。

解決策 #1 - 外観: なし - Internet Explorer 10 - 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 ) があります - 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 要素を切り詰めて、デフォルトの矢印を非表示にします ( demo )

--

（詳細はこちら）

固定幅selectの div で要素をラップし、.overflow:hidden

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

その結果、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>

バージョン 35より前の Firefox でカスタム矢印が必要であるが、古いバージョンの Internet Explorer をサポートする必要がない場合は、読み続けてください...

解決策 #3 -pointer-eventsプロパティを使用する ( demo )

--

（詳細はこちら）

ここでの考え方は、要素をネイティブのドロップダウン矢印の上に重ねて (カスタムの矢印を作成するために)、その上でのポインター イベントを許可しないというものです。

利点: WebKit と Gecko でうまく動作します。見た目もいいです（飛び出しoption要素はありません）。

短所: Internet Explorer (Internet Explorer 10 以下) は をサポートしていないためpointer-events、カスタム矢印をクリックすることはできません。また、この方法のもう 1 つの (明らかな) 欠点は、ホバー効果やハンド カーソルで新しい矢印イメージをターゲットにできないことです。

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

注意: Internet Explorer 10 はconditional commentsもうサポートされていないため、このアプローチを使用する場合は、おそらくModernizrを使用する必要があります。ただし、ここで説明されている 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(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]-->

それは可能ですが、残念ながらほとんどの場合、開発者が必要とする範囲で 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 Firefox (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer  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 は WebKit ほどにはサポートしていないようですが、モバイルブラウザを含むほとんどすべての WebKit ベースのブラウザで完全に動作しますappearance。

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

Chris Heilmann によるselect 要素のスタイル属性は、 Ryan Dohery が最初の回答へのコメントで言ったことを確認します。

「select 要素はオペレーティング システムの一部であり、ブラウザのクロムではありません。したがって、スタイルの信頼性が非常に低く、いずれにせよ試しても意味がありません。」

画像を使用できず、ブラウザのサポートによって制限されていないことを除いて、私はまさにこの問題を抱えていました。これは「仕様どおり」であり、運が良ければ最終的にはどこでも動作するはずです。

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>

選択ドロップダウンのスタイル設定で気付いた最大の矛盾は、SafariとGoogle Chromeのレンダリングです (Firefox は CSS で完全にカスタマイズ可能です)。インターネットのあいまいな深さをいくつか検索した後、私は次のことに出くわしました。これは、WebKit に関する私の不安をほぼ完全に解決します。

Safari と Google Chrome の修正:

select {
  -webkit-appearance: none;
}

ただし、これによりドロップダウン矢印が削除されます。div背景、負のマージン、または選択ドロップダウンの上に絶対に配置された近くを使用して、ドロップダウン矢印を追加できます。

*詳細情報とその他の変数は、CSS プロパティで利用できます: -webkit-appearance。

<select>タグは、ブラウザーでレンダリングされる HTML ページの他の HTML 要素と同様に、CSS を使用してスタイルを設定できます。以下は、選択要素をページに配置し、オプションのテキストを青色でレンダリングする (非常に単純な) 例です。

サンプル 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;
}

ブログ投稿How to CSS form drop down style 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>

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 のものはfa-chevron-downSVG にあります。

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;}

この要素を編集することはお勧めしませんが、試してみたい場合は他の 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>

プロパティを使用し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 値を使用してクリップ プロパティをテストし、境界ボックスにクリップします

ネイティブ ソリューション

このフィドルをチェックして、過剰なスタイリングを許してください: https://jsfiddle.net/dkellner/7ac9us70/

• あなたはすでにすべての要素を知っています
• 通常の方法でスタイリングできます
• JS の関与はほとんどありません。

背後にある裏技: <select> タグが「size」というプロパティを取得するとすぐに、高さが固定されたリストとして動作し、突然、何らかの理由でスタイルを大幅に変更できるようになります。厳密に言えば、固定リストは副作用ですが、「ドロップダウンの外観」に使用するため、より役立ちます。

最小限の例:

<style>

    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

</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="1">  Gandalf        </option>
            <option value="2">  Harry Potter   </option>
            <option value="3">  Jon Snow       </option>

            <!-- ... and so on -->

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

（簡単にするために、jQueryで行いましたが、jQueryなしでも同じことができます）

補足事項

• このソリューションは単なる選択以上のものを提供します。値は手動で編集することもできます。デフォルトの select-restricted 方法を好む場合は、readonly プロパティを使用します。

• スタイルの可能性を最大化するために、 <optgroup> タグは子の周りではなく、前に移動されます。これは意図的なものであり、視覚的により明確であり、彼らはこのように機能することに満足しています。心配はいりません。

• Javascripts: はい、OP で「Javascript はありません」と言われたことは知ってい ますが、プラグインを気にしないでくださいと理解しました。これで問題ありません。これにはライブラリは必要ありません。私が言ったように、jQueryでさえありませんが、それは例を明確にするためだけです。

:afterとを使用:beforeしてトリックを実行する非常に良い例は、CSS3 を使用した選択ボックスのスタイリング | にあります。CSSデッキ

はい。次のように、タグ名で任意の 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>

これは、この議論からの私のお気に入りのアイデアに基づく解決策です。これにより、追加のマークアップなしで <select> 要素を直接スタイリングできます。

Internet Explorer 10 (およびそれ以降) で動作し、Internet Explorer 8/9 の安全なフォールバックを備えています。これらのブラウザーに関する 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 Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
    display: none;
}

コードペン

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

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;
}

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

CSSを使用したselect、optgroup、optionsのスタイリングのように行う必要があります。多くの点で、背景色と色は、選択全体ではなく、オプションのスタイルを設定するために通常必要なものです。

Danield の回答の 3 番目の方法は、ホバー効果やその他のマウス イベントで動作するように改善できます。「ボタン」要素がマークアップの選択要素の直後に来るようにしてください。次に、 + CSS セレクターを使用してターゲットに設定します。

HTML:

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

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

ただし、これは、「ボタン」だけでなく、選択要素の上にホバーすると、ホバー効果が表示されます。

このメソッドをAngularと組み合わせて使用​​しています（私のプロジェクトはたまたまAngularアプリケーションであるため）、選択要素全体をカバーし、選択したオプションのテキストをAngularに「ボタン」要素に表示させます。この場合、選択範囲のどこかにホバーするとホバー効果が適用されることは完全に理にかなっています。

ただし、JavaScript がないと機能しないため、これを行いたい場合で、サイトを JavaScript なしで動作させる必要がある場合は、スクリプトで拡張に必要な要素とクラスが追加されていることを確認する必要があります。そうすれば、JavaScript を使用しないブラウザーは、正しく更新されないスタイル付きバッジの代わりに、通常のスタイルなしの選択を取得します。

CSS と HTML のみのソリューション

Chrome、Firefox、および Internet Explorer 11 と互換性があるようです。ただし、他の Web ブラウザーに関するフィードバックをお寄せください。

Danield's answerで示唆されているように、期待される動作を得るために、select を div (x ブラウザーとの互換性のために 2 つの div も) でラップします。

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 is hiding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;

    /* margin-top & margin-bottom must be set since some
       browsers 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;
}