HTML 5와 CSS 3에 컬러 드롭 다운 선택기를 표시하려면 어떻게합니까?

Question

나는 기본 HTML 선택이 있습니다

<select> 
    <option value="1">Apple</option> 
    <option value="2">Banana</option> 
    <option value="3">Grape</option> 
</option> 

내가 다른 하나에 각 옵션의 배경 색상을 설정합니다. 예를 들어, 애플은 빨간색, 바나나는 노란색, 포도는 보라색입니다. 드롭 다운을 시작하면 각 옵션마다 다른 색상이 표시됩니다.

는 달성/HTML5 최신 파이어 폭스 및 웹킷에 (크롬과 사파리) 브라우저 CSS3와 위 할 수 있습니까?

: Mac의 경우 최신 Firefox 및 Chrome에서 솔루션을 테스트 할 수 있습니까? 배경색 방법을 알고 있지만 Mac의 Firefox에서만 작동합니다.

Answer 1

이렇게 쉽게 쉬울 수 있습니까? http://jsfiddle.net/d8p8Q/

<select> 
    <option value="1" style="background:red">Apple</option> 
    <option value="2" style="background:yellow">Banana</option> 
    <option value="3" style="background:purple">Grape</option> 
</select> 

나는 여기에 뭔가가 없습니까?

그게 내가 유혹하고있어 하나이기 때문에 사파리           크롬           (내가 사용하고 윈도우 7)

"포도"파란색입니다 위에. 네이티브 <select> 요소를 사용하여 파란색 "선택된"색상을 변경할 수 있다고 생각하지 않습니다.

즉 당신이하고 계신 있다면, 당신은 이들과 같은 자바 스크립트 교체, 함께 <select>의를 교체해야합니다 : 물론

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Answer 2

/* Style */ 
select option[value="1"] { 
    background-color: #f00; 
} 

select option[value="2"] { 
    background-color: #0f0; 
} 

select option[value="3"] { 
    background-color: #00f; 
} 

<!-- HTML --> 
<select>  
    <option value="1">Red</option> 
    <option value="2">Green</option> 
    <option value="3">Blue</option> 
</select> 

클래스를 사용하여 대상을 지정하는 것이 더 쉬울 수 있지만이 작업을 시작해야합니다.

Answer 3

이와 비슷한? http://jsfiddle.net/3HWUw/1/

HTML :

<select> 
    <option id="one" value="1">Apple</option> 
    <option id="two" value="2">Banana</option> 
    <option id="three"value="3">Grape</option> 
</select> 

CSS :

#one { 
    background-color: red; 
} 
#two { 
    background-color: yellow; 
} 
#three { 
    background-color: green; 
} 

Answer 4

위의 작품, 또는이 같은 CSS에서 작업을 수행 할 수 있습니다

http://jsfiddle.net/JmwJ9/