选项卡时选择2表单控件不聚焦答案

【问题标题】：select2 form-control not focusing when tabbing选项卡时选择2表单控件不聚焦
【发布时间】：2021-12-10 01:13:55
【问题描述】：

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

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

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

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

【问题讨论】：

您的问题纯粹是视觉问题，即焦点行为正确但您看不到吗？因为通常你不需要为 <select> 设置 tabindex=0，所以默认情况下它是可聚焦的。此外，您的 div 不应该有 tabindex=0，因为它在其中包含另一个可聚焦的元素（这是您最好避免的模式）。
@QuentinC 是的，它纯粹是视觉的，当我选择时，选择是聚焦的，但没有显示任何视觉迹象表明它是聚焦的（即在聚焦时单击输入将打开选择字段）。可访问性指南需要向用户提供一些关于字段或链接已聚焦的反馈，因此我正在寻找一种在聚焦时突出显示选择字段的方法
您仍然可以删除 tabindex=0，因为它对您没有任何帮助。我认为您还需要在您的问题中添加精度，因为我现在唯一能说的是您的 <select> 没有在您的 CSS 中显示类 .select2-selection__rendered 。由于它纯粹是视觉效果，我无法提供更多帮助，抱歉。
.select2-selection__rendered 存在，因为.select2-selection__rendered:hover{ outline: none !important; box-shadow: 0px 0px 5px 2px lightblue !important; } 将在悬停时成功勾勒出轮廓

标签： javascript css bootstrap-4 accessibility jquery-select2

【解决方案1】：

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

最后做了：

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

【讨论】：