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

HTML에서 선택한 옵션 스타일 지정 <select> 요소

HTML 양식에서 <select> 요소는 사용자 선택을 위한 옵션의 드롭다운 목록을 제공합니다. 기본적으로 선택한 옵션은 파란색 배경으로 나타납니다. 이 문서에서는 CSS와 JavaScript를 사용하여 선택한 옵션의 배경색을 사용자 정의하는 방법을 살펴봅니다.

CSS 접근 방식

안타깝게도 배경을 수정할 수 있는 고유한 CSS 속성이 없습니다. <select> 내에서 선택한 옵션의 색상 요소. 그러나 이를 달성하기 위해 CSS와 HTML을 사용하여 사용자 정의 선택 요소를 생성할 수 있습니다.

<div class="custom-select">
  <select>

.custom-select {
  position: relative;
  width: 200px;
}

.custom-select select {
  display: none;
}

.custom-select-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.custom-select:hover .custom-select-overlay {
  opacity: 0.5;
}

.custom-select select:focus + .custom-select-overlay {
  opacity: 1;
}

JavaScript 접근 방식

JavaScript를 사용하면 선택 시 선택한 옵션의 배경색을 직접 변경하는 DOM:

<select>

var select = document.getElementById('mySelect');

select.addEventListener('change', function() {
  var options = this.children;
  for (var i = 0; i < options.length; i++) {
    options[i].style.backgroundColor = 'white';
  }
  this.children[this.selectedIndex].style.backgroundColor = 'red';
});

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