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