나는이 코드를 시도

Question

난`는 HTML 옵션 태그 에 이미지를 사용하려고 시도하는 HTML 옵션 태그에 이미지를 추가 할 수 없습니다 :

<select class="lang_menu"> 
    <option value="ka">ქართული</option> 
    <option value="ru">русский</option> 
    <option value="en">English</option> 
</select> 

및 CSS 코드 :

select .lang_menu option { 
    background-repeat:no-repeat; 
    background-position:bottom left; 
    padding-left:30px;} 
select .lang_menu option[value="ka"] { 
    background-image:url(../image/geo.png); 
} 
select .lang_menu option[value="ru"] { 
    background-image:url(../image/rus.png); 
} 
select .lang_menu option[value="en"] { 
    background-image:url(../image/eng.png); 
} 

하지만 아무 일도. 내 콤보는 다음과 같이해야합니다 :

내 이미지 크기는 16px X 11px

내가 어떤 자바 스크립트를 사용하지 않습니다.

Answer 1

jQuery 없이는 불가능합니다. 파이어 폭스에서 배경 이미지를 얻을 수 있다면 단순히 크롬을 지원하지 않기 때문에 크롬이나 다른 브라우저에서는이를 얻을 수 없습니다.

이 link을 참조하고 마지막 예제를 원하는대로 정확하게보십시오.

Answer 2

시도해보십시오. 희망이 당신을 도울 수 있습니다. 당신은 어떤 플러그인이 이미 당신을 위해 작성되었습니다 일부 사용자 선택 요소를 사용할 필요가 같은 플러그인을 사용하는 것도 좋은 선택이다,

select { 
    -webkit-appearance: button; 
    -moz-appearance: button; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -webkit-padding-end: 20px; 
    -moz-padding-end: 20px; 
    -webkit-padding-start: 2px; 
    -moz-padding-start: 2px; 
    background-color: #F07575; /* fallback color if gradients are not supported */ 
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */ 
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */ 
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/ 
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */ 
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */ 
    background-position: center right; 
    background-repeat: no-repeat; 
    border: 1px solid #AAA; 
    border-radius: 2px; 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 
    color: #555; 
    font-size: inherit; 
    margin: 0; 
    overflow: hidden; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}