[html] CSS : : checked와 유사하지만 <select> 요소에 대한 선택 의사 클래스

Program / 글쓴이

<option>요소에서 현재 선택된 요소의 스타일을 지정하는 방법이 <select>있습니까?

그런 다음 현재 선택한 옵션 요소에 배경색을 지정할 수 있습니까? 이렇게하면 현재 닫힌 드롭 다운에서 볼 수있는 옵션의 스타일을 지정할 수 있습니다.

답변

:checked의사 클래스는 처음에 HTML4이 같은 요소에 적용 selected및 checked특성을

출처 : w3.org

따라서 color모든 브라우저에서 스타일을 지정할 수는 없지만이 CSS는 작동 합니다.

option:checked { color: red; }

이 동작의 예는 드롭 다운 목록에서 현재 선택된 항목을 숨기는 것입니다.

option:checked { display:none; }
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

스 니펫 확장

닫힌 드롭 다운 에서 현재 선택된 옵션의 스타일도 지정하려면 논리를 반대로 할 수 있습니다.

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */

답변

실제로 : modified 옵션 요소 에서 CSS 속성을 몇 가지만 스타일링 할 수 있습니다 .
color작동하지 않는, background-color중,하지만 당신은을 설정할 수 있습니다 background-image.

이것을 그라디언트와 결합하여 트릭을 수행 할 수 있습니다.

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

스 니펫 확장

gecko / webkit에서 작동합니다.

답변

이것은 나를 위해 일했습니다.

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}

답변