我一直在尝试将默认浏览器下拉菜单的颜色(蓝色,现在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代码?请帮帮我
1条答案
按热度按时间roejwanj1#
您可能已经遇到过这种情况,但定制HTML
<option>
并不那么容易。关于this StackOverflow thread的说明。有几个选项可以作为变通方法,select 2就是其中之一,使用JS。根据docs,您必须能够使用选择器来捕获您想要自定义的
<select>
标记。你可以显式地选择一个选择器,例如一个类,并确保Django传递它:将呈现为
<select class='mySelectorForSelect2'>
。所以,你可以加上你的JS
另一种选择,需要更多的工作,但给你自定义的自由,是创建自己的小部件来呈现你的
ChoiceField
没有<select>
/<option>
逻辑,但例如<ul>
/<li>
,如在引导下拉菜单。一些指针here。