HTML 요소에서 선택한 옵션의 배경색을 어떻게 변경할 수 있나요?

HTML <select>에서 선택한 옵션의 배경색 사용자 정의 CSS 사용

HTML <select> 요소는 사용자가 선택할 수 있는 옵션 목록을 제공합니다. 기본적으로 사용자가 옵션을 선택하면 파란색 배경으로 표시됩니다. 이 기본 동작은 항상 원하는 디자인과 일치하지 않을 수도 있습니다. 따라서 이 기본값을 무시하고 선택한 옵션의 배경색을 사용자 정의하는 솔루션을 찾는 것이 필요합니다.

CSS는 <select> 내에서 선택한 옵션의 스타일을 직접 지정할 수 있는 제한된 옵션을 제공합니다. 요소. 예를 들어 selected-ground-color와 같은 CSS 속성 설정은 지원되지 않습니다.

그러나 JavaScript는 이러한 사용자 정의를 위한 해결 방법을 제공합니다. 다음은 JavaScript를 사용하여 선택한 옵션의 배경색을 빨간색으로 변경하는 예입니다.

<select>

이 예에서 JavaScript 코드는 <select> 요소를 선택하고 선택한 옵션의 배경색을 빨간색으로 설정하고 다른 모든 옵션의 배경색은 흰색으로 설정합니다. 사용자가 옵션을 선택할 때마다 변경 이벤트 리스너가 트리거되어 배경색이 동적으로 업데이트될 수 있습니다.

JavaScript를 사용하면 <select> 요소를 사용하여 시각적 디자인을 더욱 효과적으로 제어할 수 있습니다.

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