드롭 다운 선택의 스타일 텍스트 옵션

Question

드롭 다운 선택 요소의 여러 옵션에 몇 가지 기본 스타일을 적용하려고합니다. Firefox에서는 스타일이 작동하지만 Chrome 및 IE9에서는 스타일이 유효하지 않습니다. Chrome에서는 디버그 관리자에서 스타일을 읽고 다른 스타일에 의해 덮어 쓰지 않는 것을 볼 수 있습니다. 어떤 아이디어?

예컨대이 규칙 :

<option value="1" class="depth-0">Home</option> 

Answer 1

스왑 select과 CSS에 option 선택기 :

option.depth-0 select{ 
    font-weight: bold; 
} 

편집

이 요소에

select option.depth-0 { 
    font-weight: bold; 
} 

옵션 select 요소는 실제로 브라우저의 일부가 아닙니다. 그것은 OS의 일부입니다. 스타일을 짓기가 어렵습니다.

예를 들어, 당신은 select 요소의 일부 option의 height을 변경할 수 없습니다. font-weight을 변경한다고 가정했습니다.

유일한 옵션은 사용자 정의 select 요소를 만드는 것입니다. 예를 들어 JavaScript를 사용합니다. 그런 다음 CSS를 사용하여 필요에 따라 사용자 정의 할 수 있습니다. 그리고 그것은 크로스 브라우저가 될 것입니다.