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

Question

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

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

我的 select 字段如下所示：

<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>

虽然 <div class="col"> 上的 tabindex ="0" 允许我突出显示该字段，但我必须再按一次 Tab 键才能按回车键查看该字段上的选项。

我也注意到 :hover 有效但 :focus 无效。

Answer 1

所以我发现 CSS class 是 .select2-selection--single

最后做了：

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