비활성화 된 옵션과 별도로 선택한 옵션 색상의 스타일을 지정하는 방법

Question

첫 번째 옵션이 비활성화 된 HTML 드롭 다운 선택 메뉴가 있습니다. 기본 비활성화 된 옵션을 회색으로 표시하고 싶지만 일단 다른 값을 선택하면 파란색으로 표시됩니다. 이것을 어떻게 할 수 있습니까?

내가 선택한 옵션을 얻을 수 있었다

은 회색으로 표시되며 선택할 수있는 옵션은 목록에서 파란색으로 표시 할 수 있습니다. 그들이 선택하지만 일단 모두 해제하지 않도록 설정 옵션은 어쨌든 회색으로 표시됩니다 :

select:not(:checked) { 
    color: gray; 
} 
select option:not(:disabled){ 
    color: #000098; 
} 

Answer 1

당신은 사용할 수 없습니다 첫 번째 옵션을 선택합니다 여기 select option:first-child을이 스타일을 시도 attribute selector

select[disabled]{ 
    color: #f00; 
} 

Answer 2

사용할 수 있습니다.

select option { color: blue; } 
    select option:first-child{ 
     color: gray; 
    } 

Answer 3

요소를 선택하는 데 필요한 태그를 입력하면됩니다.

HTML :

<select name="number" required> 
    <option value="" disabled selected hidden>Placeholder</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 

CSS :

select:required:invalid { 
    color: gray; 
} 
select, option { 
    color: blue; 
} 

https://jsfiddle.net/p63eg7d8/