在Django表单中将默认的悬停选项从蓝色更改为自定义?(选择2)

cqoc49vn  于 2023-10-21  发布在  Go
关注(0)|答案(1)|浏览(107)

我一直在尝试将默认浏览器下拉菜单的颜色(蓝色,现在EDGE上是灰色)更改为其他颜色,我尝试了包括Select2在内的所有方法,但都无法正常工作.选择是从Django的数据库中生成的。
取得了进展,改变按钮,一旦他们被点击,但不能改变悬停从默认的蓝色和灰色的边缘到别的东西。

select option:hover,
    select option:focus,
    select option:active {
        background: linear-gradient(#000000, #000000);
        background-color: #000000 !important;
        color: gray !important;
    }

    select option:checked {
        background: linear-gradient(yellow, yellow);
        background-color: yellow !important; 
        color: white;
    }

以下是用于选择的HTML:

{% for f in select_form %}
                            <tr>
                                <th>{{ f.label_tag }} </th>
                                <td>{{ f }}</td>
                            </tr>
                        {% endfor %}

Example
我尝试为select2添加一个CSS属性,但没有效果:

.select2-container--default .select2-selection--single:hover {
  background-color: yellow !important; /* Change to your desired hover color */
  color: #fff; /* Change text color if needed */
}

我是否必须在Django表单中为类设置一个属性才能获得select2属性,或者我可以采取什么方法,因为我不能直接访问HTML代码?请帮帮我

roejwanj

roejwanj1#

您可能已经遇到过这种情况,但定制HTML <option>并不那么容易。关于this StackOverflow thread的说明。
有几个选项可以作为变通方法,select 2就是其中之一,使用JS。根据docs,您必须能够使用选择器来捕获您想要自定义的<select>标记。你可以显式地选择一个选择器,例如一个类,并确保Django传递它:

# forms.py

class MyForm(forms.ModelForm):
    ...
    my_select = forms.ModelChoiceField(
        queryset = MyObject.objects.all(),
        widget = forms.Select(attrs = {"class":"mySelectorForSelect2"})
    )

将呈现为<select class='mySelectorForSelect2'>。所以,你可以加上

$(document).ready(function() {
    $('.mySelectorForSelect2').select2();
});

你的JS
另一种选择,需要更多的工作,但给你自定义的自由,是创建自己的小部件来呈现你的ChoiceField没有<select>/<option>逻辑,但例如<ul>/<li>,如在引导下拉菜单。一些指针here

相关问题