如何通过CSS修改下拉框<option>鼠标悬停的默认蓝色背景？

我想修改下拉选项<option>鼠标悬停时的默认蓝色背景，试过论坛里的多种方案都无效（这些方案在旧版Chrome里曾生效），用option:hover选择器也没效果。有没有办法通过CSS实现非蓝色的悬停背景？

附上相关代码：

HTML代码 #

<div class="starComponent">
        <div class="product">
            <select name="product" id="phone">
                <option value="">Product</option>
                <option value="iPhoneXR">iPhone XR</option>
                <option value="iPhone12">iPhone 12</option>
                <option value="iPhone13">iPhone 13</option>
            </select>
            <input type="number" placeholder="Rating" size="8" min="0" max="5" id="rating">
            <button class="btn btn-dark" type="submit" onclick="save()">Save</button>
        </div>
        <div class="stars1">iphone XR
            <i class="fa-regular fa-star xr_star"></i>
            <i class="fa-regular fa-star xr_star"></i>
            <i class="fa-regular fa-star xr_star"></i>
            <i class="fa-regular fa-star xr_star"></i>
            <i class="fa-regular fa-star xr_star"></i>
        </div>
        <div class="stars2">iphone 12
            <i class="fa-regular fa-star 12_star"></i>
            <i class="fa-regular fa-star 12_star"></i>
            <i class="fa-regular fa-star 12_star"></i>
            <i class="fa-regular fa-star 12_star"></i>
            <i class="fa-regular fa-star 12_star"></i>
        </div>
        <div class="stars3">iphone 13
            <i class="fa-regular fa-star 13_star"></i>
            <i class="fa-regular fa-star 13_star"></i>
            <i class="fa-regular fa-star 13_star"></i>
            <i class="fa-regular fa-star 13_star"></i>
            <i class="fa-regular fa-star 13_star"></i>
        </div>

    </div>

CSS代码 #

option:hover{
    background-color: rgb(152, 173, 173);
    color: rgb(189, 85, 85);
}

1. 针对Firefox的CSS hack（局限性大） #

现代浏览器（尤其是新版Chrome）对原生<select>和<option>的样式限制极严，option:hover选择器基本无法生效。仅能针对Firefox通过特定属性实现：

/* 仅Firefox下生效 */
option:not(:checked):hover {
  background-color: rgb(152, 173, 173) !important;
  color: rgb(189, 85, 85) !important;
}

但该方法无法覆盖Chrome、Edge等其他浏览器的默认样式。

2. 自定义模拟下拉组件（推荐跨浏览器方案） #

要实现全浏览器兼容的自定义悬停样式，最可靠的方式是用HTML+CSS+JS模拟原生下拉框，完全摆脱原生<select>的样式限制：

示例代码：

<div class="starComponent">
    <div class="product">
        <!-- 自定义下拉框 -->
        <div class="custom-select">
            <div class="select-trigger" id="custom-trigger">Product</div>
            <div class="select-options" id="custom-options">
                <div class="option" data-value="">Product</div>
                <div class="option" data-value="iPhoneXR">iPhone XR</div>
                <div class="option" data-value="iPhone12">iPhone 12</div>
                <div class="option" data-value="iPhone13">iPhone 13</div>
            </div>
        </div>
        <!-- 保留原有输入框和按钮 -->
        <input type="number" placeholder="Rating" size="8" min="0" max="5" id="rating">
        <button class="btn btn-dark" type="submit" onclick="save()">Save</button>
        <!-- 隐藏input用于表单提交 -->
        <input type="hidden" name="product" id="hidden-product-value">
    </div>
    <!-- 保留原有星星评分部分 -->
    <div class="stars1">iphone XR
        <i class="fa-regular fa-star xr_star"></i>
        <i class="fa-regular fa-star xr_star"></i>
        <i class="fa-regular fa-star xr_star"></i>
        <i class="fa-regular fa-star xr_star"></i>
        <i class="fa-regular fa-star xr_star"></i>
    </div>
    <div class="stars2">iphone 12
        <i class="fa-regular fa-star 12_star"></i>
        <i class="fa-regular fa-star 12_star"></i>
        <i class="fa-regular fa-star 12_star"></i>
        <i class="fa-regular fa-star 12_star"></i>
        <i class="fa-regular fa-star 12_star"></i>
    </div>
    <div class="stars3">iphone 13
        <i class="fa-regular fa-star 13_star"></i>
        <i class="fa-regular fa-star 13_star"></i>
        <i class="fa-regular fa-star 13_star"></i>
        <i class="fa-regular fa-star 13_star"></i>
        <i class="fa-regular fa-star 13_star"></i>
    </div>
</div>

.custom-select {
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

.select-trigger {
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    min-width: 150px;
}

.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background-color: #fff;
    display: none;
    z-index: 100;
}

.select-options.show {
    display: block;
}

.option {
    padding: 6px 12px;
    cursor: pointer;
}

.option:hover {
    background-color: rgb(152, 173, 173);
    color: rgb(189, 85, 85);
}

// 下拉框交互逻辑
const trigger = document.getElementById('custom-trigger');
const options = document.getElementById('custom-options');
const optionItems = options.querySelectorAll('.option');
const hiddenInput = document.getElementById('hidden-product-value');

// 点击触发器展开/收起选项
trigger.addEventListener('click', () => {
    options.classList.toggle('show');
});

// 点击选项更新触发器文本并设置隐藏input值
optionItems.forEach(item => {
    item.addEventListener('click', () => {
        trigger.textContent = item.textContent;
        hiddenInput.value = item.dataset.value;
        options.classList.remove('show');
    });
});

// 点击页面其他区域收起下拉框
document.addEventListener('click', (e) => {
    if (!e.target.closest('.custom-select')) {
        options.classList.remove('show');
    }
});

这种方案完全由自定义元素构成，可自由控制所有样式（包括悬停效果），且跨浏览器兼容性良好。

内容的提问来源于stack exchange，提问作者Ashish Pradhan