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


86

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

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

답변:


123

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

출처 : 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 */

5
테스트 했습니까? 작동하지 않는 것 FF8에 나를 위해. 업데이트 : Chromium 15에서도 작동하지 않습니다.
Brigand 2011

1
@emmett 나도 Chrome 16에서 확인했습니다. 이전 댓글에서 말했듯이 드롭 다운 목록에서 선택한 옵션의 스타일을 지정하지만 닫힌보기 가능 영역의 옵션은 지정하지 않습니다.
Web_Designer

2
@Web_Designer 좋아, 문제가 보인다. 나는 다른 (놀라운) 솔루션으로 내 대답을 편집했습니다.
Emmett 2011

수락 된 답변이 크롬에서 작동하지 않습니다. 여기 테스트 할 수 있습니다 jsfiddle.net/hk4s0ech
앙드레 셰니에

18

실제로 : 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에서 작동합니다.


받아 들여진 대답은 저에게 효과가 없었지만이 솔루션은 효과가 있습니다. 감사합니다!
Anthony Hilyard

다음과 같이 필터를 적용 할 수도 있습니다. Option : checked {filter : grayscale (1);} 이것은 요즘 Chrome에서 체크 박스와 라디오 버튼을 파란색이 아닌 스타일로 지정할 수있는 것과 비슷합니다.
KS74

3

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

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.