如何修改Django表单（Select2）中下拉选项默认hover颜色为自定义色？

为啥原生CSS改不了？ #

浏览器（尤其是Edge/Chrome）对原生<select>的<option>元素hover样式支持极其有限，option:hover这类CSS选择器根本覆盖不了浏览器默认样式，这就是你之前代码失效的原因。

用Select2搞定（正确步骤） #

你之前试Select2没效果，是因为没给Django表单字段加对应类，也没完成组件初始化。按下面步骤来：

1. 给Django表单的下拉字段加类 #

修改你的表单类，给目标下拉字段加上select2类：

from django import forms

class YourSelectForm(forms.Form):
    # 替换成你的实际字段和模型
    target_field = forms.ModelChoiceField(
        queryset=YourModel.objects.all(),
        widget=forms.Select(attrs={'class': 'select2'})  # 关键：添加select2类
    )
    # 其他字段...

2. 引入Select2和jQuery资源 #

在模板里引入Select2的CSS、JS，以及它依赖的jQuery（建议本地部署资源）：

<!-- 引入jQuery -->
<script src="/static/js/jquery.min.js"></script>
<!-- 引入Select2样式 -->
<link href="/static/css/select2.min.css" rel="stylesheet" />
<!-- 引入Select2脚本 -->
<script src="/static/js/select2.min.js"></script>

3. 初始化Select2组件 #

在模板底部加一段JS，初始化所有带select2类的下拉框：

<script>
$(document).ready(function() {
    $('.select2').select2({
        // 可选配置：比如占位符、是否允许清空
        placeholder: "请选择",
        allowClear: true
    });
});
</script>

4. 写自定义hover样式 #

现在就能用CSS完全控制Select2的hover和选中样式了：

/* 下拉选项hover时的样式 */
.select2-results__option--highlighted[aria-selected] {
    background-color: #000 !important;
    color: gray !important;
}

/* 选中选项的样式 */
.select2-results__option[aria-selected=true] {
    background-color: yellow !important;
    color: white !important;
}

/* 下拉框本身hover的样式 */
.select2-container--default .select2-selection--single:hover {
    background-color: #f0f0f0 !important;
}

效果验证 #

做完这些步骤，Edge里的下拉框hover样式就会变成你自定义的颜色，不会再显示默认灰色了。

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