HTML 要素で選択したオプションの背景色をカスタマイズするにはどうすればよいですか?

HTML での選択したオプションのスタイル設定 要素

HTML フォームでは、要素は、ユーザー選択のためのオプションのドロップダウン リストを提供します。デフォルトでは、選択したオプションは青色の背景で表示されます。この記事では、CSS と JavaScript を使用して選択したオプションの背景色をカスタマイズする方法について説明します。

CSS アプローチ

残念ながら、背景を変更するための固有の CSS プロパティはありません。 内で選択されたオプションの色要素。ただし、CSS と HTML を使用してカスタム select 要素を作成すると、これを実現できます。

<div class="custom-select">
  <select><pre class="brush:php;toolbar:false">.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></select>

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

select.addEventListener('change', function() {
  var options = this.children;
  for (var i = 0; i