如何使用 CSS 設定 HTML `` 元素的樣式？

樣式;使用CSS 的元素

與使用JavaScript 自訂下拉清單相比，無法直接設定 的樣式。 中的元素由於瀏覽器不相容，元素單獨使用 CSS。

跨瀏覽器相容性

對於IE9、Firefox 和Chrome 等瀏覽器，以下CSS 屬性可以提供部分樣式選項：

• -webkit-外觀：無；（WebKit瀏覽器）
• -moz-appearance：無; (Firefox)
• 外觀： 無；（現代瀏覽器）

這些屬性可以刪除下拉清單的預設樣式，但進一步的自訂受到限制。

替代解決方案

要實現類似的外觀，您可以使用解決方法，將 轉換為使用HTML 和CSS 將元素添加到自定義下拉清單中：

1. 建立一個
   ;元素來表示下拉清單。
2. 使用 HTML 建立
   帶有
   • 的元素下拉選項的標籤。
   • 隱藏
     元素最初使用 display: none; CSS 屬性。
   • 將滑鼠停留在
     上時元素，設定 display: block; 顯示

     ;元素並新增邊框、填滿和背景顏色的樣式。
     • 設定
     • 的樣式
       內的元素具有懸停和活動狀態的互動效果。

     範例

     <div>
       Select
       <ul>
         <li><a href="#">Item 1</a></li>
         <li><a href="#">Item 2</a></li>
         <li><a href="#">Item 3</a></li>
       </ul>
     </div>

     div { 
       margin: 10px;
       padding: 10px; 
       border: 2px solid purple; 
       width: 200px;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
     }
     div > ul { display: none; }
     div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
     div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
     div:hover > ul > li:hover { background: white;}
     div:hover > ul > li:hover > a { color: red; }