javascript - 单击时在 Select2 多选上指定边框颜色
问题描述
我想更改select2
单击时的边框颜色(onfocus)。
我试过这样做,但它改变了选择的边框颜色,如下所示。如何指定边框颜色?
$('.sf-multi-select').select2({
placeholder: 'Select or type to search',
closeOnSelect: false,
});
.select2-search__field:focus {
border: 1px solid #43AEA8 !important;
}
.sf-multi-select:focus {
border: 1px solid #43AEA8 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="sf-multi-select" placeholder="Type to search" multiple="multiple">
<option value="17">Choce 1</option>
<option value="16">Choice 2</option>
</select>
解决方案
你可以这样做:
$('.sf-multi-select').select2({
placeholder: 'Select or type to search',
closeOnSelect: false,
});
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: 1px solid red!important;
}
select {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="sf-multi-select" placeholder="Type to search" multiple="multiple">
<option value="17">Choce 1</option>
<option value="16">Choice 2</option>
</select>
所以与其使用:focus
,不如修改自己的焦点类.select2-container--default.select2-container--focus
推荐阅读
- x11 - 如何在 Ubuntu 20.04 上启用 X11 显示?(我在本地安装)
- c++ - 如何制作考虑到 2s 补码的小型有符号整数文字?
- nested - 使用 Bogus 设置成员属性值范围
- python - 使用并发和 boost::python 回调
- python - 将数据从 25hz 下采样到 10hz
- sql - Netezza 代码转换以减号结尾的数据,而不是以减号开头
- javascript - 将 HTML 编码为有效的 JSON
- python - Celery - 我应该为 Windows 繁重的 cpu 进程和 redis 后端使用什么池来进行状态跟踪?
- linux - 在 Linux 中静默安装 PowerShell 模块 /quiet
- python - Seaborn 如何在 catplot 或 pointplot 中使用关键字参数