SELECT 요소의 이미지

Question

CSS 배경 이미지 속성을 사용하여 HTML 드롭 다운 폼 요소의 옵션 옆에 그림을 표시하는 방법을 알고 있습니다.

그러나 이미지는 선택한 요소에 표시되지 않습니다. 이 작업을 수행 할 수있는 방법이 있습니까 (CSS 만 사용하는 것이 좋음).

편집 : 여기

목록 요소의 작동 코드의 예이다. 드롭 다운이 닫힐 때 그러나, 당신은 단지 이미지없이, 선택한 요소의 텍스트를 참조하십시오 크로스 브라우저 방식으로 이렇게

이

<select name="form[location]"> 
    <option value="ad" style="background: url(img/flags/ad.gif) no-repeat; padding-left: 20px;">Andorra</option> 
    <option value="ae" style="background: url(img/flags/ae.gif) no-repeat; padding-left: 20px;">United Arab Emirates</option> 
    <option value="af" style="background: url(img/flags/af.gif) no-repeat; padding-left: 20px;">Afghanistan</option> 
    <option value="ag" style="background: url(img/flags/ag.gif) no-repeat; padding-left: 20px;">Antigua and Barbuda</option> 
    <option value="ai" style="background: url(img/flags/ai.gif) no-repeat; padding-left: 20px;">Anguilla</option> 
    <option value="al" style="background: url(img/flags/al.gif) no-repeat; padding-left: 20px;">Albania</option> 
    <option value="am" style="background: url(img/flags/am.gif) no-repeat; padding-left: 20px;">Armenia</option> 
    <option value="an" style="background: url(img/flags/an.gif) no-repeat; padding-left: 20px;">Netherlands Antilles</option> 
    <option value="ao" style="background: url(img/flags/ao.gif) no-repeat; padding-left: 20px;">Angola</option> 
    <option value="ar" style="background: url(img/flags/ar.gif) no-repeat; padding-left: 20px;" selected="selected">Argentina</option> 

    [...] - I think you get the idea. 

</select> 

Answer 1

매우 도전이 될 것입니다, 나는 생각한다, 불가능한.

대신, 선택 상자처럼 보이고 작동하지만 HTML로 작성된 & 자바 스크립트를 사용해 볼 수도 있습니다. 내가 Nicholaides에 동의

jquery.combobox

Answer 2

:

다음은 jQuery를 함께 할 수있는 하나의 방법입니다. HTML과 CSS를 엄격하게 사용하는 것은 효과가 없습니다.

프로그레시브 향상 기술을 사용하여 자바 스크립트를 사용하지 않거나 화면 판독기 등을 사용하지 않는 사용자를 위해 페이지에 일반 선택 상자를 배치 한 다음 자바 스크립트를 사용하여 선택 상자를 더 예쁘게 바꾸십시오 , 팬시 위젯.