html - 스크롤 - selectbox title




SELECT 요소의 이미지 (2)

이 질문에는 이미 답변이 있습니다.

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

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

편집하다:

다음은 list 요소의 작업 코드 예제입니다. 그러나 드롭 다운이 닫히면 선택한 요소의 텍스트 만 이미지없이 볼 수 있습니다.

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

나는 Nicholaides와 동의한다. HTML과 CSS를 엄격하게 사용하는 것은 효과가 없습니다.

점진적 향상 기술을 사용하여 자바 스크립트를 사용하지 않거나 화면 판독기 등을 사용하지 않는 사용자를 위해 페이지에 일반 선택 상자를 배치 한 다음 자바 스크립트를 사용하여 선택 상자를 더 예민하고 고급스러운 위젯으로 교체하십시오.


크로스 브라우저 방식으로이 작업을 수행하는 것은 매우 어려울 것이며, 나는 불가능하다고 생각합니다.

대신 선택 상자처럼 보이고 작동하지만 HTML 및 자바 스크립트로 만들어진 위젯을 사용해 볼 수도 있습니다.

jQuery로 할 수있는 한 가지 방법은 다음과 같습니다.

jquery.combobox





html-select