선택 태그의 옵션 요소를 스타일링하는 방법은 무엇입니까?

Question

Google 크롬의 select 드롭 다운 메뉴에서 option의 스타일을 설정하려고합니다. 그것은 IE9와 크롬을 제외한 모든 브라우저에서 작동합니다. 자바 스크립트를 사용하지 않고

option.red { 
 
    background-color: #cc0000; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    color: white; 
 
}

<select name="color"> 
 
    <option class="red" value="red">Red</option> 
 
    <option value="white">White</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="green">Green</option> 
 
</select>

, 구글 크롬의 옵션에 스타일을 설정하는 방법은 무엇입니까? 일단 선택되면 배경색이 표시되지 않습니다.

Answer 1

불행히도 WebKit 브라우저는 color 및 background-color을 제외한 <option> 태그의 스타일 지정을 아직 ​​지원하지 않습니다.

가장 널리 사용되는 크로스 브라우저 솔루션은 <ul>/<li>을 사용하고 CSS를 사용하여 스타일을 지정하는 것입니다. Bootstrap과 같은 프레임 워크는 이와 같이 잘 수행됩니다.

Answer 2

브라우저 devs 또는 W3C에서 스타일 선택 옵션에 대한 W3C 사양을 찾을 수 없습니다. 스타일 선택 옵션을 허용하지 않습니다.

이것이 네이티브 선택 목록과의 일관성을 유지하는 것으로 판단됩니다.
(예 : 휴대 기기를 생각해보세요.)

분할 값

• 사용 Select2 실제로 그룹에 위해 (여러 가지 수) ul의
• 여러으로 select의 분할로 선택을 변환합니다

  3 솔루션은 내 마음에 와서 에 optgroup

Answer 3

실제로 내가 최근에 발견 한 것은 stylin 순수한 CSS를 사용하는 Chrome, Firefox 및 IE 내의 개별 요소 <option></option>

아마, 다음을 시도하십시오

HTML :

<select> 
    <option value="blank">Blank</option> 
    <option class="white" value="white">White</option> 
    <option class="red" value="red">Red</option> 
    <option class="blue" value="blue">Blue</option> 
</select> 

CSS : 않는 바람에 무엇을 던지는주의

select { 
    background-color:#000; 
    color: #FFF; 
} 

select * { 
    background-color:#000; 
    color:#FFF; 
} 

select *.red { /* This, miraculously, styles the '<option class="red"></option>' elements. */ 
    background-color:#F00; 
    color:#FFF; 
} 

select *.white { 
    background-color:#FFF; 
    color:#000; 
} 

select *.blue { 
    background-color:#06F; 
    color:#FFF; 
} 

이상한. 하지만 :active :hover :focus :link :visited :after :before을 지원하지 않는 것 같습니다. JSFiddle에

예 : 크롬의 http://jsfiddle.net/Xd7TJ/2/

Answer 4

향후 버전 (49+) 지금 font-weight으로 <option> 요소를 스타일링 지원합니다. 출처 : https://code.google.com/p/chromium/issues/detail?id=44917#c22

새 SELECT 팝업 : 글꼴 두께 스타일을 적용해야합니다.

이 CL은 themeChromiumSkia.css를 제거합니다.|!important|에서 을 적용하면 font-weight이 적용됩니다. 이제 html.css는 |font-weight:normal|이고 |!important|은 불필요합니다.

이번에는 font-weight: normal !important;을 사용하는 Chrome 스타일 시트 themeChromiumSkia.css가있었습니다. 버전 49.0에 의해 안정된 Chrome 채널에 있어야합니다.

Answer 5

jquery를 사용하여 해결 방법이 있습니다 ... 특정 옵션의 스타일을 지정할 수는 없지만 select 자체의 스타일을 지정할 수 있습니다. 또한 javascript를 사용하여 선택한 항목을 기반으로 선택 클래스를 변경할 수 있습니다. 간단한 경우에 충분합니다.

$('select.potentially_red').on('change', function() { 
 
if ($(this).val()=='red') { 
 
    $(this).addClass('option_red'); 
 
} else { 
 
    $(this).removeClass('option_red'); 
 
} 
 
}); 
 
$('select.potentially_red').each(function() { 
 
if ($(this).val()=='red') { 
 
    $(this).addClass('option_red'); 
 
} else { 
 
    $(this).removeClass('option_red'); 
 
} 
 
});

.option_red { 
 
    background-color: #cc0000; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    color: white; 
 
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<!-- The js will affect all selects which have the class 'potentially_red' --> 
 
<select name="color" class="potentially_red"> 
 
    <option value="red">Red</option> 
 
    <option value="white">White</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="green">Green</option> 
 
</select>

JS는 두 부분으로 변화 대응을 위해, 제대로 페이지에 .on('change', ... 부분을 모두 초기화에 대한 each 일부임을

참고. 나는 js를 DRY 할 수있는 함수에 넣을 수 없었습니다. 어떤 이유에서 건 깨지기도했습니다.