CSS를 사용하여 선택 상자 옵션의 배경색을 어떻게 변경할 수 있습니까?

선택 상자 옵션 배경색 변경 방법

선택 상자를 클릭하면 옵션 목록이 표시됩니다. 기본적으로 이러한 옵션의 배경색은 선택 상자 자체의 배경색과 동일합니다. 하지만 CSS를 사용하여 옵션의 배경색을 변경할 수 있습니다.

이를 위해서는 select 요소가 아닌 옵션 요소에 background-color 속성을 적용해야 합니다. 예를 들어 다음 CSS 코드는 선택 상자에 있는 모든 옵션의 배경색을 검은색으로 변경합니다.

select option {
  background-color: black;
}

각 옵션의 스타일을 개별적으로 지정하려면 CSS 속성 선택기를 사용할 수 있습니다. 예를 들어, 다음 CSS 코드는 선택 상자에 있는 첫 번째 옵션의 배경색을 빨간색으로, 두 번째 옵션을 녹색으로, 세 번째 옵션의 배경색을 파란색으로 변경합니다.

select option:first-child {
  background-color: red;
}

select option:nth-child(2) {
  background-color: green;
}

select option:nth-child(3) {
  background-color: blue;
}

다른 옵션을 사용할 수도 있습니다. 각 에 대한 클래스 속성 원하는 경우 요소. 예를 들어, 다음 CSS 코드는 옵션-1 클래스가 있는 선택 상자의 모든 옵션의 배경색을 빨간색으로 변경하고 옵션-2 클래스가 있는 모든 옵션의 배경색을 녹색으로 변경합니다.

.option-1 {
  background-color: red;
}

.option-2 {
  background-color: green;
}

위 내용은 CSS를 사용하여 선택 상자 옵션의 배경색을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!