首頁 > web前端 > css教學 > 如何自訂懸停時選擇清單選項突出顯示?

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

DDD
發布: 2024-12-24 09:11:42
原創
339 人瀏覽過

How Can I Customize Select List Option Highlights on Hover?

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

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

解決方案:

要解決此問題,請使用插入框陰影:

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

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板