How Can I Customize the Background Color of Selected Options in HTML `` Elements?

Styling Selected Options in HTML <select> Elements

In HTML forms, the <select> element provides a dropdown list of options for user selection. By default, the selected option appears in a blue background. This article explores how to customize the background color of the selected option using CSS and JavaScript.

CSS Approach

Unfortunately, there is no inherent CSS property to modify the background color of a selected option within a <select> element. However, you can create a custom select element using CSS and HTML to achieve this:

<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 Approach

Using JavaScript, you can manipulate the DOM directly to change the background color of the selected option upon its selection:

<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';
});

The above is the detailed content of How Can I Customize the Background Color of Selected Options in HTML `` Elements?. For more information, please follow other related articles on the PHP Chinese website!