스타일 지정 드롭 다운 상자

Question

스타일을 지정한 HTML 드롭 다운 상자가 있습니다. 문제는 옵션의 배경색을 스타일링 할 수없는 것입니다. 아래는 드롭 다운 옵션이 변경하려는 흰색 배경을 가지고 있음을 보여주는 데모 링크입니다. 여기 DEMO의

<div class="select-div"> 
    <select name="pagination"> 

     <option value="10" selected="selected">10</option> 
     <option value="20">20</option> 
     <option value="30">30</option> 
     <option value="40">40</option> 
     <option value="50">50</option> 
    </select> 
    </div> 

CSS 스타일링

select{ 
    background:transparent; 
    width: 170px; 
    padding: 2px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:11px; 
    font-weight:600; 
    color:#fff; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 22px; 
    -webkit-appearance: none; 

    } 

    .select-div{ 
width: 170px; 
height: 22px; 
overflow: hidden; 
background: url(arrowhead.png) no-repeat right #363636; 
border-top:#575757 1px solid; 
-webkit-border-radius: 4px 4px 4px 4px; 
-moz-border-radius: 4px 4px 4px 4px; 
     border-radius: 4px 4px 4px 4px; 
-webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
     -moz-box-shadow: 0px 8px 3px -9px #000000; 
     -webkit-box-shadow: 0px 8px 3px -9px #000000; 
     box-shadow:   0px 8px 3px -9px #000000; 
    } 

감사

Answer 1

:

http://cssdeck.com/labs/lnroxrua

여기 내 HTML 코드입니다. 예를 들어

select > option { 
    background: color; 
} 

:

select > option { 
    background: pink; /* Or an hexadecimal value */ 
} 

건배, 레오

그냥이 CSS 규칙을 추가!

Answer 2

불행히도 웹킷 브라우저는 아직 태그 스타일을 지원하지 않습니다.

검사 : How to style a select tag's option element?