html - 关闭下拉框后更改 <select> 背景颜色

标签 html css drop-down-menu highlight

我找到了一些很好的解决方案来改变下拉框中元素的颜色:

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
            select option:hover,
            select option:focus,
            select option:active {
                background-color: lightpink !important; /* for IE */
                color: #ffed00 !important;
            }

            select option:checked {
                background-color: green !important; /* for IE */
                color: #000000 !important;
            }
        </style>
    </head>
    <body>
        <select>
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
            <option>Item 4</option>
        </select>
    </body>
    </html>

这对下拉框很有效(确实有一些奇怪的颜色):

enter image description here

选中后,高亮项的背景仍然默认为蓝色:

enter image description here

我该怎么做才能改变这种颜色?

最佳答案

应用选定的规则<option>也给<select>标记(例如:select option:checked, select)。

关于html - 关闭下拉框后更改 <select> 背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51066689/

相关文章:

css - 添加了品牌形象SVG额外的透明空间

html - 向菜单提供滚动条时子菜单未打开

jquery - 打开一个下拉菜单时关闭另一个下拉菜单

javascript - 使用 javascript 隐藏下拉选项

javascript - onclick - 匿名函数 vs 定义 vs html onclick

html - 对于 Ruby 和/或 Ruby on Rails,这就是非编码人员提出的问题

html - 在同一行对齐 html 输入

javascript - Invisible recaptcha是可见的

PHP 导致页眉和横幅之间出现间隙

css - 动画切换网格大小