如何自訂懸停時選擇清單選項突出顯示？

修改懸停時選擇清單選項突出顯示

自訂懸停時選擇清單選項的外觀可以增強使用者體驗。一種常見的請求是在將滑鼠懸停在選項上時更改預設背景顏色。不幸的是，CSS 規則「option:hover { background-color: red; }」無法實現此目的。

解決方案：

要解決此問題，請使用插入框陰影：

select.decorated option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}

在此範例中，「裝飾」類別應用於選擇框。當此裝飾選擇框中的選項懸停時，將套用顏色為 #1882A8 的嵌入框陰影，從而創建所需的背景顏色變化。這種技術有效地覆蓋了預設的突出顯示並提供了更可自訂的使用者介面。

以上是如何自訂懸停時選擇清單選項突出顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！