html 스크롤 SELECT 요소의 이미지




selectbox title (2)

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

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

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

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>

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

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

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

jquery.combobox







html-select