選択リストに画像を追加する方法は？

性別の選択リストがあります。

コード：

<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>  

ドロップダウンリストの画像をdrop-down-icon.jpegとして使用したい。

ドロップダウンアイコンの代わりにボタンを追加したい。

どうやってするか？

ではFirefoxのあなただけのオプションに背景画像を追加することができます。

<select>
  <option style="background-image:url(male.png);">male</option>
  <option style="background-image:url(female.png);">female</option>
  <option style="background-image:url(others.png);">others</option>
</select> 

さらに良いことに、そのようにHTMLとCSSを分離できます

HTML

<select id="gender">
  <option>male</option>
  <option>female</option>
  <option>others</option>
</select>  

CSS

select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }

では他のブラウザそれを行う唯一の方法は、例えばのように、いくつかのJSウィジェットのライブラリを使用してしまうのjQuery UI使っ例えば、選択を。

jQuery UI 1.11から、Selectmenuウィジェットを使用できます。これは、希望するものに非常に近いものです。

私の解決策は、FontAwesomeを使用して、ライブラリイメージをテキストとして追加することです。Unicodeが必要なだけで、UnicodeのFontAwesome参照ファイルがここにあります。

以下は状態フィルターの例です。

<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'>
<option value=''>&#xf039; &nbsp; All States</option>
<option value='enabled' style='color:green;'>&#xf00c; &nbsp; Enabled</option>
<option value='paused' style='color:orange;'>&#xf04c; &nbsp; Paused</option>
<option value='archived' style='color:red;'>&#xf023; &nbsp; Archived</option>
</select>

font-family：Arial、FontAwesomeに注意してください。例に示すように、selectのスタイルで割り当てる必要があります！

iconselect.jsを使用できます。アイコン/画像選択（コンボボックス、ドロップダウン）

デモとダウンロード; http://bug7a.github.io/iconselect.js/

HTMLの使用法。

<div id="my-icon-select"></div>

JavaScriptの使用法。

    var iconSelect;

    window.onload = function(){

        iconSelect = new IconSelect("my-icon-select");

        var icons = [];
        icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
        icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
        icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});

        iconSelect.refresh(icons);

    };

JavaScript / jQueryの使用を提案するいくつかの回答があります。JSなしでHTMLとCSSのみを使用する代替を追加します。

基本的な考え方は、ラジオボタンとラベル（ラジオボタンをアクティブ化/非アクティブ化）のセットを使用し、CSSコントロールを使用して、選択したラジオボタンに関連付けられたラベルのみを表示することです。複数の値を選択できるようにする場合は、ラジオボタンの代わりにチェックボックスを使用してそれを実現できます。

例を示します。コードは少し面倒かもしれません（特に他のソリューションと比較して）：

.select-sim {
  width:200px;
  height:22px;
  line-height:22px;
  vertical-align:middle;
  position:relative;
  background:white;
  border:1px solid #ccc;
  overflow:hidden;
}

.select-sim::after {
  content:"▼";
  font-size:0.5em;
  font-family:arial;
  position:absolute;
  top:50%;
  right:5px;
  transform:translate(0, -50%);
}

.select-sim:hover::after {
  content:"";
}

.select-sim:hover {
  overflow:visible;
}

.select-sim:hover .options .option label {
  display:inline-block;
}

.select-sim:hover .options {
  background:white;
  border:1px solid #ccc;
  position:absolute;
  top:-1px;
  left:-1px;
  width:100%;
  height:88px;
  overflow-y:scroll;
}

.select-sim .options .option {
  overflow:hidden;
}

.select-sim:hover .options .option {
  height:22px;
  overflow:hidden;
}

.select-sim .options .option img {
  vertical-align:middle;
}

.select-sim .options .option label {
  display:none;
}

.select-sim .options .option input {
  width:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  float:left;
  display:inline-block;
  /* fix specific for Firefox */
  position: absolute;
  left: -10000px;
}

.select-sim .options .option input:checked + label {
  display:block;
  width:100%;
}

.select-sim:hover .options .option input + label {
  display:block;
}

.select-sim:hover .options .option input:checked + label {
  background:#fffff0;
}

<div class="select-sim" id="select-color">
  <div class="options">
    <div class="option">
      <input type="radio" name="color" value="" id="color-" checked />
      <label for="color-">
        <img src="http://placehold.it/22/ffffff/ffffff" alt="" /> Select an option
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="red" id="color-red" />
      <label for="color-red">
        <img src="http://placehold.it/22/ff0000/ffffff" alt="" /> Red
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="green" id="color-green" />
      <label for="color-green">
        <img src="http://placehold.it/22/00ff00/ffffff" alt="" /> Green
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="blue" id="color-blue" />
      <label for="color-blue">
        <img src="http://placehold.it/22/0000ff/ffffff" alt="" /> Blue
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="yellow" id="color-yellow" />
      <label for="color-yellow">
        <img src="http://placehold.it/22/ffff00/ffffff" alt="" /> Yellow
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="pink" id="color-pink" />
      <label for="color-pink">
        <img src="http://placehold.it/22/ff00ff/ffffff" alt="" /> Pink
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="turquoise" id="color-turquoise" />
      <label for="color-turquoise">
        <img src="http://placehold.it/22/00ffff/ffffff" alt="" /> Turquoise
      </label>
    </div>
  </div>
</div>

この問題に対するもう1つのjQueryクロスブラウザーソリューションは、http：//designwithpc.com/Plugins/ddSlickで、まさにこの用途のために作られています。

国、言語、通貨で絵文字を使用できます。

絵文字の使用をサポートするほとんどすべてのブラウザー/ OSで動作します。

select {
 height: 50px;
 line-height: 50px;
 font-size: 12pt;
}

<select name="countries">
    <option value="NL">🇳🇱&emsp;Netherlands</option>
    <option value="DE">🇩🇪&emsp;Germany</option>
    <option value="FR">🇫🇷&emsp;France</option>
    <option value="ES">🇪🇸&emsp;Spain</option>
</select>

<br /><br />

<select name="currency">
    <option value="EUR">🇪🇺&emsp;€&emsp;EUR&emsp;💶</option>
    <option value="GBP">🇬🇧&emsp;£&emsp;GBP&emsp;💷</option>
    <option value="USD">🇺🇸&emsp;$&emsp;USD&emsp;💵</option>
    <option value="YEN">🇯🇵&emsp;¥&emsp;YEN&emsp;💴</option>
</select>

2色の画像の場合、Fontelloを使用して、使用するカスタムグリフをインポートできます。Illustratorで画像を作成し、SVGに保存してFontelloサイトにドロップし、インポートする準備ができているカスタムフォントをダウンロードするだけです。JavaScriptなし！

画像を使用してjqueryベースのカスタム選択をいくつか試しましたが、レスポンシブレイアウトでは機能しませんでした。最後に、Bootstrap-Selectに遭遇しました。いくつかの変更の後、私はこのコードを生成することができました。

ここにコードとgithubレポ

アイコンを表示し、「白黒」のソリューションを受け入れる場合、1つの可能性は文字エンティティを使用することです。

   <select>
      <option>100 &euro;</option>
      <option>89 &pound;</option>
    </select>

さらに、アイコンはカスタムフォントで保存できます。FontAwesomeフォントを使用した例を次に示します 。https：//jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

1つの利点は、Javascriptを必要としないことです。ただし、フォント全体をロードしても、ページのロードが遅くなることはありません。

注意： 背景画像を使用するソリューションは、Firefoxでは機能しないようです（少なくともバージョン57の "Quantum"）。

<select>
  <option style="background-image:url(euro.png);">100</option>
  <option style="background-image:url(pound.png);">89</option>
</select>

Alvaros JS自由回答は私にとって素晴らしいスタートでした。私は本当に、画像付きのSelectに期待されるすべての機能を提供する本当にJSのない回答を取得しようとしましたが、悲しいことにフォームのネストは。ここに2つの解決策を掲載します。JavaScriptの1行を使用する私の主なソリューションと、JavaScriptを使用しない完全に別のフォーム内では機能しないソリューションですが、ナビゲーションメニューには役立つかもしれません。

残念ながら、コードには少し繰り返しがありますが、選択が何をするかを考えるとき、それは理にかなっています。オプションをクリックすると、そのテキストが選択した領域にコピーされます。つまり、4つのオプションの1つをクリックしても4つのオプションは変更されませんが、上部にはクリックしたオプションが繰り返されます。画像でこれを行うには、JavaScriptまたはorrrrが必要になります...エントリを複製します。

私の例では、バージョンのあるゲーム（製品）のリストがあります。各製品には、バージョンもある拡張機能が含まれている場合があります。各製品について、複数のバージョンがある場合は、画像とバージョン固有のテキストとともに、各バージョンのリストをユーザーに提供します。

<h4>@Model.Name</h4>
@if (Model.Versions.Count == 1)
{
    <div class="rich-select-option-body pl-2">
        <img src="@Model.Versions[0].ImageUrl" alt="">@Model.Versions[0].VersionName (@Model.Versions[0].Year)
    </div>
}
else
{
    <h5>Select the version</h5>
    <div class="rich-select custom-select">
        <div class="rich-select-dropdown">
            @foreach (var version in Model.Versions)
            {
                <div class="rich-select-option">
                    <input type="radio" name="game" id="game-@version.ProductId-@version.VersionId" @if (version == Model.Versions.First()) { @Html.Raw(" checked") ; } />
                    <div class="rich-select-option-body">
                        <label tabindex="-1">
                            <img src="@version.ImageUrl" alt="">@version.VersionName (@version.Year)
                        </label>
                    </div>
                </div>
            }
        </div>
        <input type="checkbox" id="rich-select-dropdown-button" class="rich-select-dropdown-button" />
        <label for="rich-select-dropdown-button"></label>
        <div class="rich-select-options">
            @foreach (var version in Model.Versions)
            {
                <div class="rich-select-option">
                    <div class="rich-select-option-body">
                        <label for="game-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button').click();">
                            <img src="@version.ImageUrl" alt=""> @version.VersionName (@version.Year)
                        </label>
                    </div>
                </div>
            }
        </div>
    </div>
}

チェックボックスの選択解除にJSを使用すると、フォーム上に複数のインスタンスを持つことができます。ここでは、バージョンに関する同じロジックを持つ拡張のリストを表示するように拡張しました。

<h5 class="mt-3">Include Expansions?</h5>
@foreach (var expansion in Model.Expansions)
{
    <div class="form-row">
        <div class="custom-control custom-checkbox w-100">
            <input type="checkbox" class="expansion-checkbox custom-control-input" id="exp-@expansion.ProductId">
            <label class="custom-control-label w-100" for="exp-@expansion.ProductId">

                @if (expansion.Versions.Count == 1)
                {
                    <div class="rich-select-option-body pl-2">
                        <img src="@expansion.ImageUrl" />@expansion.Name: @expansion.Versions[0].VersionName (@expansion.Versions[0].Year)
                    </div>
                }
                else
                {
                    <div class="rich-select custom-select">
                        <div class="rich-select-dropdown">
                            @foreach (var version in expansion.Versions)
                            {
                                <div class="rich-select-option">
                                    <input type="radio" name="exp-@version.ProductId" id="exp-@version.ProductId-@version.VersionId" @if (version == expansion.Versions.First()) { @Html.Raw(" checked") ; } />
                                    <div class="rich-select-option-body">
                                        <label tabindex="-1">
                                            <img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
                                        </label>
                                    </div>
                                </div>
                            }
                        </div>

                        <input type="checkbox" id="rich-select-dropdown-button-@expansion.ProductId" class="rich-select-dropdown-button" />
                        <label for="rich-select-dropdown-button-@expansion.ProductId"></label>
                        <div class="rich-select-options">
                            @foreach (var version in expansion.Versions)
                            {
                                <div class="rich-select-option">
                                    <div class="rich-select-option-body">
                                        <label for="exp-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button-@expansion.ProductId').click();">
                                            <img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
                                        </label>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                }
            </label>
        </div>
    </div>

もちろん、これにはかなりのCSSが必要です。これは、すでにこの大規模な回答のサイズを小さくするために、このJSFiddleにのみ含めたものです。私はBootstrap 4を使用して、必要な量を減らし、他のBootstrapコントロールや行われたサイトのカスタマイズに合わせることができるようにしました。

画像は、75pxに設定されているが、これは容易に5行に変更することができる.rich-selectと.rich-select-option-body img

同じ問題が発生しました。私の解決策は、ラジオボタンのforeachで、その右に画像が表示されていました。ラジオでは1つのオプションしか選択できないので、それは選択のように機能します。

私のためによく働きなさい。それが他の誰かを助けることを願っています。

これはms-Dropdownを使用しています：https : //github.com/marghoobsuleman/ms-Dropdown

データリソースはjsonです。ただし、jsonを使用する必要はありません。必要に応じて、cssで使用できます。

Cssの例：https : //github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

Jsonの例：http ://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

<div id="byjson"></div>

脚本

<script>
        var jsonData = [
            {description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
            {image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
            {image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
            {image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
            {image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
            {image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
            {image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
        ];
        $("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
    }
</script>

更新：2018年現在、これは現在機能しているようです。Chrome、Firefox、IE、Edgeでテスト済み

<!DOCTYPE html>
<html>
<body>

<style>
select#newlocale option[value="volvo"]   { background-color: powderblue;   }
select#newlocale option[value="opel"]   { background-color: red;   }
select#newlocale option[value="audi"]   { background-color: green;   }
</style> 

<select id="newlocale">
  <option value="volvo"><div >Volvo</div></option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>