html - 更改选择标签下特定选项的颜色
问题描述
我正在使用 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>
解决方案
$(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--highlighted.select2”上应用-results__option--可选”。如果您需要像第二个选项这样的颜色特定选项,那么您可以使用 ".select2-container--default .select2-results>.select2-results__options li:nth-child(2)" 。
推荐阅读
- javascript - 如何在子组件的按钮单击时重新渲染父组件
- node.js - 让变量重新分配但保持未定义(socket.io,node.js,react)
- javascript - React Native 声音不工作(远程 URL)
- html - e.preventDefault 会在点击 li 后屏蔽锚标签
- node.js - 如何在 Express js 中使用 multer 将图像上传到 Google Cloud
- python-3.x - 在 python3 中安装库 bls-lib 时出错
- python - Nativescript 找不到六个
- unit-testing - 在单元测试golang之前init函数不运行
- solr - Solr如何使用路径层次标记器在电子商务中实现类别?
- javascript - 为什么我会收到“RangeError:超出最大调用堆栈大小”?