option悬停时的背景颜色可以改变吗?如何改变?(最好纯css)

chrome的下拉菜单悬停时默认的背景颜色是蓝色。我想要改成其他颜色。
查了资料后发现可以用-webkit-appearance:none;来实现。但是我做的damo没能实现。
CSS样式如下

    <style type="text/css">
        select{margin-top: 1px;background: none;-webkit-appearance: none;}
        option{height: 30px;background-color: #fff;padding-right: 10px;padding-left: 10px;-webkit-appearance:none;appearance:none;}
        option:hover{background-color: #ddd;}
    </style>

DOM

<body>
    <button>按钮</button>
    <br>
    <select>
        <option>下拉菜单</option>
        <option>下拉菜单</option>
        <option>下拉菜单</option>
        <option>下拉菜单</option>
    </select>
</body>

烦请解答

阅读 12.5k
1 个回答
目前应该是不可行的,因为option的样式颜色应该不是由css来设置的。跟浏览器本身有关系,用li来代替的话可以达到类似的效果。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题