선택 목록에 이미지를 추가하는 방법은 무엇입니까?

선정 된 성별 목록이 있습니다.

암호:

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

다른 브라우저 에서는 jQuery UI 와 같은 JS 위젯 라이브러리 ( 예 : Selectable 사용)를 사용하는 것이 유일한 방법입니다 .

jQuery UI 1.11부터 Selectmenu 위젯을 사용할 수 있으며 원하는 것에 매우 가깝습니다.

내 해결책은 FontAwesome을 사용하고 라이브러리 이미지를 텍스트로 추가하는 것입니다! 유니 코드가 필요하며 여기에 있습니다 : FontAwesome Reference File forUnicodes

다음은 상태 필터의 예입니다.

<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을 참고하십시오 . 예제와 같이 선택을 위해 스타일을 지정해야합니다!

iconselect.js를 사용할 수 있습니다. 아이콘 / 이미지 선택 (콤보 박스, 드롭 다운)

데모 및 다운로드; http://bug7a.github.io/iconselect.js/

HTML 사용법;

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

자바 스크립트 사용법;

    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>

이 문제에 대한 또 다른 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 사이트에 놓은 다음 사용자 정의 글꼴을 가져올 준비가 된 상태로 다운로드하십시오. 자바 스크립트가 없습니다!

이미지로 여러 jquery 기반 사용자 정의 선택을 시도했지만 반응 형 레이아웃에서는 아무것도 작동하지 않았습니다. 마침내 나는 Bootstrap-Select를 맞았습니다. 일부 수정 후이 코드를 생성 할 수있었습니다.

코드 및 github 저장소

아이콘을 표시하고 "흑백"솔루션을 수락하려는 경우 문자 엔티티를 사용할 수 있습니다.

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

확장하여 아이콘을 사용자 정의 글꼴로 저장할 수 있습니다. FontAwesome 글꼴을 사용하는 예는 다음과 같습니다 . https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

한 가지 이점은 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 with images에서 기대하는 모든 기능을 여전히 제공하는 진정한 JS 무료 답변을 얻으려고 노력했지만 슬프게도 중첩 양식이 실패했습니다. 여기에 두 가지 솔루션을 게시하고 있습니다. 한 줄의 JavaScript를 사용하는 기본 솔루션과 다른 양식에서는 작동하지 않지만 탐색 메뉴에 유용 할 수있는 완전히 JavaScript가없는 솔루션입니다.

불행히도 코드에는 약간의 반복이 있지만 Select의 기능에 대해 생각할 때 의미가 있습니다. 옵션을 클릭하면 해당 텍스트가 선택한 영역에 복사됩니다. 즉, 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 에는 이미 방대한 대답의 크기를 줄이기 위해이 JSFiddle 에만 포함 시켰습니다 . 필자는 Bootstrap 4를 사용하여 필요한 양을 줄이고 다른 Bootstrap 컨트롤 및 사이트 사용자 정의에 맞출 수 있도록했습니다.

이미지는 75px로 설정되어 있지만, 이는 쉽게 5 개 라인 변경 가능 .rich-select하고.rich-select-option-body img

나는 같은 문제를 겪었다. 내 솔루션은 오른쪽에 이미지가있는 각 라디오 버튼이었습니다. 라디오에서는 단일 옵션 만 선택할 수 있으므로 선택과 같은 방식으로 작동합니다.

나를 위해 잘 작동합니다. 다른 사람을 도울 수 있기를 바랍니다.

이것은 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>