如何使用 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; }