CSS를 사용하여 HTML 드롭다운 목록에서 선택한 옵션의 스타일을 어떻게 지정합니까?

CSS를 사용하여 드롭다운 목록에서 선택한 옵션 스타일 지정

HTML 선택 요소로 작업할 때 선택한 옵션의 모양을 사용자 정의해야 하는 경우가 많습니다. 이는 확인란 및 라디오 버튼에 대한 :checked 의사 클래스와 유사한 CSS :selected 의사 클래스를 통해 달성할 수 있습니다.

:selected 의사 클래스는 현재 활성화되어 있거나 드롭다운 목록에 표시되는 옵션 요소를 대상으로 합니다. . 이를 통해 선택한 옵션에 스타일을 적용하여 다른 옵션과 구별할 수 있습니다.

:checked와 유사함에도 불구하고 :selected 의사 클래스는 동일한 스타일 속성을 상속하지 않습니다. 특히, 색상 속성 설정이 모든 브라우저에서 항상 지원되는 것은 아닙니다.

그러나 다음 CSS 코드를 사용하여 배경색으로 선택한 옵션의 스타일을 지정할 수 있습니다.

option:selected {
  background-color: red;
}

이것은 코드는 현재 선택된 옵션에 빨간색 배경을 적용하여 가시성을 높이고 사용자에게 시각적 피드백을 제공합니다.

대안으로 :selected 의사 클래스를 사용하여 다음을 수행할 수도 있습니다. 드롭다운 목록 자체에서 선택한 옵션을 숨깁니다. 이는 사용자에게 보다 간결하거나 간소화된 목록을 제공하는 데 유용할 수 있습니다.

option:checked {
  display: none;
}

이 코드는 표시된 목록에서 선택한 옵션을 제거하여 사용자가 나머지 옵션에만 집중할 수 있도록 합니다.

위 내용은 CSS를 사용하여 HTML 드롭다운 목록에서 선택한 옵션의 스타일을 어떻게 지정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!