CSS 및 JavaScript를 사용하여 ``요소에서 선택한 옵션의 배경색을 어떻게 변경할 수 있습니까?

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

CSS는

요소에는 현재 선택한 옵션의 배경색을 변경하는 특정 스타일 속성이 없습니다. 그러나 순수한 CSS와 JavaScript를 결합하면 이러한 제한을 효과적으로 해결할 수 있습니다.

제공된 HTML 코드 예제에서 요소는 "배경색:빨간색;"을 사용하여 드롭다운 목록의 배경색을 설정합니다. 그러나 옵션을 선택하면 기본 파란색으로 간주됩니다. 이를 재정의하고 선택한 옵션의 배경색을 사용자 정의하려면 기존 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);

이 스크립트의 경우:

요소를 ID로 표시합니다.

사용자가 요소의 경우 모든 하위 요소(옵션)를 반복하여 색상을 흰색으로 설정합니다.

그런 다음 선택한 옵션을 가져와 색상을 빨간색으로 설정하여 나머지 요소 중에서 강조 표시합니다.

이 JavaScript 솔루션을 사용하면 선택한 옵션의 배경색을 사용자 정의할 수 있지만 요소의 CSS 스타일을 직접 변경하지는 않는다는 점에 유의하는 것이 중요합니다. JavaScript를 통해 요소의 동적 모양을 조작합니다. 이 접근 방식은 선택한 옵션의 배경색만 사용자 정의하고

요소.

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