更改选择标签下特定选项的颜色
Posted
技术标签:
【中文标题】更改选择标签下特定选项的颜色【英文标题】:Change color of a particular option under select tag 【发布时间】:2021-01-21 05:50:10 【问题描述】:我正在使用 select 2 https://select2.org/,我想知道如何使用 value="4"
更改所选选项的颜色。 So when Mark as destroyed
is selected it shows in a different colour.我尝试直接设置类和内联 css,但都不起作用。
Not working: <option value="4" class="tx-orange">Mark as destroyed</option>
Not working: <option value="4" style="color:orange;">Mark as destroyed</option>
这是选择块的样子
<select id="scanActionOptions" class="form-control select2">
<option value="0">Verify</option>
<option value="1">Mark as active</option>
<option value="2">Mark as dispense</option>
<option value="3">Mark as stolen</option>
<option value="4">Mark as destroyed</option>
<option value="5">Mark as sample</option>
<option value="6">Mark as free sample</option>
<option value="7">Mark as locked</option>
<option value="8">Mark as exported</option>
<option value="9">Mark as checkout</option>
<option value="10">Mark as expired</option>
<option value="11">Mark as recalled</option>
<option value="12">Mark as withdrawn</option>
</select>
【问题讨论】:
您需要设置 select 2 替换的样式 - 而不是选项 【参考方案1】:$(document).ready(function()
$('.select2').select2();
);
/*selected css*/
.select2-container--default .select2-results__option--selected
color: orange;
background:rgb(221 221 221 / 32%) !important;
/*hover css*/
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable
background-color: orange !important;
color: white;
/*particular option color*/
.select2-container--default .select2-results>.select2-results__options li:nth-child(2)
color: #fff;
background: red !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<select id="scanActionOptions" class="form-control select2">
<option value="0">Verify</option>
<option value="1">Mark as active</option>
<option value="2">Mark as dispense</option>
<option value="3">Mark as stolen</option>
<option value="4">Mark as destroyed</option>
<option value="5">Mark as sample</option>
<option value="6">Mark as free sample</option>
<option value="7">Mark as locked</option>
<option value="8">Mark as exported</option>
<option value="9">Mark as checkout</option>
<option value="10">Mark as expired</option>
<option value="11">Mark as recalled</option>
<option value="12">Mark as withdrawn</option>
</select>
如果您需要更改所选颜色,请在“.select2-container--default .select2-results__option--selected”上应用 css 并更改悬停 css,然后应用在“.select2-container--default .select2-results__option-- highlight.select2-results__option--selectable”。 如果您需要像第二个选项这样的颜色特定选项,那么您可以使用 ".select2-container--default .select2-results>.select2-results__options li:nth-child(2)" 。
【讨论】:
【参考方案2】:Select2 CSS 似乎从这个规则集中获得了样式
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable
background-color: #5897fb;
color: white;
您可以使用 li:nth-child(x) 应用于前面显示的规则集。应用于原始选择的 CSS 将不可见。
【讨论】:
可以根据option值来代替li:nth-child(x)吗?我在不同页面有相同的列表,但选项可能不同以上是关于更改选择标签下特定选项的颜色的主要内容,如果未能解决你的问题,请参考以下文章
更改 HTML 从 JavaScript 中选择标签字体颜色