select2 表单控件在 Tab 键切换时不聚焦

Question

尝试在字段上切换时，字段不会突出显示。我尝试了很多解决方案，例如：

.select2-selection__rendered:focus {
  outline: none !important;
  box-shadow: 0px 0px 5px 2px lightblue !important;
} 

我的选择字段如下所示：

<div class="col">
  <label>Start Month *</label>
  <select name="startMonth" class="select2 form-control" tabindex="0">
    {%for month, name in months%}
      <option value="{{ month }}">{{ name }}</option>
    {% endfor %}
  </select>
</div>

虽然

tabindex ="0"

上的

<div class="col">

允许我突出显示该字段，但我必须再按 Tab 键一次，然后才能按 Enter 键查看该字段上的选项。

我还注意到

:hover

有效，但

:focus

无效。

Answer 1

所以我发现CSS类是

.select2-selection--single

最终做了：

.select2-selection--single:focus, .select2-selection--single:hover{
    box-shadow: 0px 0px 5px 2px lightcoral !important;
  }