선택 입력 창에 이미지 태그를 배치하는 방법

Question

아래 선택 상자가 완벽하게 작동합니다. 그러나 각 옵션 그룹에 작은 색상 상자를 배치하고 싶습니다. 그 안에 span 태그를 사용해 보았지만 작동하지 않는 것 같습니다.

앵커 태그 나 이미지를 사용하고 싶지 않습니다. 가능한 경우 컨테이너 태그를 사용하는 것을 선호합니다.

아래 코드를 동봉했습니다. 코드 아래

<select name="search-legend"> 
     <option value=""></option> 
     <option value="1"<?= $this->ReturnSearchValue == "1" ? 'selected' : '' ?>> <span id="redbox"> </span> value1 </option> 
     <option value="2"<?= $this->ReturnSearchValue == "2" ? 'selected' : '' ?>> <span id="bluebox"></span> value2 </option> 
     <option value="3"<?= $this->ReturnSearchValue == "3" ? 'selected' : '' ?>> <span id="greenbox"></span> value3 </option> 

    </select> 

CSS를

#redbox { 
    background: red; 

} 

Answer 1

는 HTML은 지원되지 않습니다. 당신은 당신이 그것을 할 수없는 <option>

HTML

<select class="search-legend"> 
    <option value=""></option> 
    <option value="" class="redbox"></option> 
    <option value="" class="greenbox"></option> 
    <option value="" class="bluebox"></option> 
</select> 

CSS

.search-legend option.redbox{ 
    background:red; 
} 
.search-legend option.greenbox{ 
    background:green; 
} 
.search-legend option.bluebox{ 
    background:blue; 
} 

Answer 2

파이어 폭스에서 작동합니다. 하지만 이러한 브라우저의 경우 jQuery UI와 같은 일부 JS 라이브러리를 사용해야합니다. <option> 내부

<select name="search-legend"> 
    <option value=""></option> 
    <option style="background-image:url(img1.png);" value="1"<?= $this->ReturnSearchValue == "1" ? 'selected' : '' ?>>value1 </option> 
    <option style="background-image:url(img2.png);" value="1"<?= $this->ReturnSearchValue == "2" ? 'selected' : '' ?>>value2 </option> 
    <option style="background-image:url(img2.png);" value="1"<?= $this->ReturnSearchValue == "3" ? 'selected' : '' ?>> value3 </option> 
</select> 

Answer 3

스타일을 지정할 수 있습니다. HTML 사양. <option> 요소 안에 html 마크 업을 허용하지 않습니다. 내 브라우저가 무시했습니다. 나는 당신이 정말로 이것을 원한다면 당신은 jQuery 플러그인 또는 뭔가에 대해 생각할 필요가 있다고 생각한다. '이미지로 jQuery 플러그인 선택'을위한 Google일지도 모릅니다.