如何自訂 HTML `` 元素中所選選項的背景顏色？

在HTML 中設定所選選項的樣式元素

在HTML 表單中，元素提供了一個選項的下拉清單供用戶選擇。預設情況下，所選選項顯示在藍色背景中。本文探討如何使用 CSS 和 JavaScript 自訂所選選項的背景顏色。

CSS 方法

不幸的是，沒有固有的 CSS 屬性來修改背景 中所選選項的顏色元素。但是，您可以使用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 方法

<script>使用Java，您可以操作DOM 直接在選取時變更所選選項的背景顏色：<p><pre class="brush:php;toolbar:false"><select></script>

以上是如何自訂 HTML `` 元素中所選選項的背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！