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

HTML Select에서 선택한 옵션의 배경색 사용자 정의

HTML에서 요소를 사용하면 사용자가 옵션 목록에서 단일 옵션을 선택할 수 있습니다. 기본적으로 브라우저는 선택한 옵션을 파란색 배경으로 강조 표시합니다. 그러나 개발자는 종종 이 모양을 추가로 사용자 정의하고 싶어합니다.

제공된 예에서

배경이 빨간색인 요소가 정의되어 있지만 선택한 옵션은 파란색으로 유지됩니다. "선택된 색상"과 같은 스타일을 사용하여 이 동작을 재정의하려는 시도는 헛된 것으로 입증되었습니다. 이 질문은 원하는 사용자 정의를 달성하는 데 사용할 수 있는 옵션에 대해 자세히 설명합니다.

JavaScript 솔루션

순수한 CSS만으로는 이 문제를 해결하는 데 충분하지 않을 수 있습니다. 그러나 간단한 JavaScript 솔루션으로 이 문제를 우아하게 해결할 수 있습니다.

var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'white';
    }
    var selected = this.children[this.selectedIndex];
        selected.style.color = 'red';
    }, false);

이 투박하지만 효과적인 방법은 선택한 옵션만 지정된 색상을 유지하고 다른 모든 옵션은 흰색으로 되돌립니다.

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