방금이 질문을 우연히 발견했으며 다음은 Firefox 및 Chrome에서 작동하는 것입니다.

<style>
select:invalid { color: gray; }
</style>
<form>
<select required>
    <option value="" disabled selected hidden>Please Choose...</option>
    <option value="0">Open when powered (most valves do this)</option>
    <option value="1">Closed when powered, auto-opens when power is cut</option>
</select>
</form>

장애인 옵션은 중지 <option>바로 사용이 반면, 마우스와 키보드 모두 선택의 존재를 'display:none'여전히 키보드 화살표를 통해 사용자가 선택할 수 있습니다. 이 'display:none'스타일은 목록 상자를 ‘좋은’모양으로 만듭니다.

참고 : value“자리 표시 자”옵션에서 빈 속성을 사용 하면 유효성 검사 (필수 속성)가 “자리 표시 자”를 가지고 문제를 해결할 수 있으므로 옵션이 변경되지 않았지만 필요한 경우 브라우저는 옵션을 선택하라는 메시지를 표시해야합니다. 목록에서.

업데이트 (2015 년 7 월) :

이 방법은 다음 브라우저에서 작동하는 것으로 확인되었습니다.

• 구글 크롬-v.43.0.2357.132
• Mozilla Firefox-v.39.0
• Safari-v.8.0.7 (자리 표시자가 드롭 다운에 표시되지만 선택할 수는 없음)
• Microsoft Internet Explorer-v.11 (자리 표시자가 드롭 다운에 표시되지만 선택할 수는 없음)
• Project Spartan-v.15.10130 (자리 표시자가 드롭 다운에 표시되지만 선택할 수는 없음)

업데이트 (2015 년 10 월) :

나는 제거 된 style="display: none"HTML5 속성에 찬성 hidden폭 넓은 지원을하고있다. hidden요소는 유사한 특성이 display: none(가) 사파리, 인터넷 익스플로러, (프로젝트 스파르타가 검사를 필요로)의 option드롭 다운 메뉴에서 볼 수 있습니다,하지만 그것은 선택할 수 없습니다.

업데이트 (2016 년 1 월) :

때 select요소가 required그것의 사용을 허용 :invalid당신이 스타일을 할 수 있습니다 CSS 의사 클래스 select때의 “자리”상태에서 요소를. :invalid자리 표시 자의 빈 값으로 인해 여기에서 작동합니다 option.

값이 설정되면 :invalid의사 클래스가 삭제됩니다. :valid원하는 경우 선택적으로 사용할 수도 있습니다 .

대부분의 브라우저는이 유사 클래스를 지원합니다. Internet Explorer 10 이상 이것은 사용자 정의 스타일 select요소 와 가장 잘 작동 합니다. 경우에 따라 (예 : Chrome / Safari의 Mac) select특정 스타일이 표시되도록 상자 의 기본 모양을 변경해야합니다 ( 예 : background-color및) color. developer.mozilla.org 에서 호환성에 대한 몇 가지 예와 자세한 내용을 찾을 수 있습니다. .

Chrome의 기본 요소 모양 Mac :

Chrome에서 변경된 경계 요소 Mac 사용 :

답변

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

#choice option { color: black; }
.empty { color: gray; }

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>

option[default] {
  display: none;
}

<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select class="place_holder dropdown">
    <option selected="selected" style=" display: none;">Sort by</option>
    <option>two</option>
    <option>something</option>
    <option>4</option>
    <option>5</option>
</select>

.place_holder {
    color: gray;
}
option {
    color: #000000;
}

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});