使用键盘选项卡时下拉菜单未突出显示答案

【问题标题】：Drop down not getting highlighted when using keyboard tab使用键盘选项卡时下拉菜单未突出显示
【发布时间】：2013-09-11 20:14:06
【问题描述】：

我试图突出显示下拉菜单的焦点（仅使用键盘选项卡），但由于某种原因，即使焦点处于焦点位置，下拉菜单也不会突出显示。有人可以帮我解决这个问题吗？

我什至尝试使用下面的 CSS 类，但由于某种原因焦点不起作用，但悬停工作正常。..

CSS：

#selector:focus{ 
      outline: #177f7f dotted medium; 
 }

#selector:hover{ --> works!!!
       outline: #177f7f dotted medium; 
  }

#sortResults:focus{ 
        outline: #177f7f dotted medium; 
 }

HTML 代码：

<div class="selector" id="selector" style="float:right;">
<span style="width: 95px; padding:0 1px; padding:1px;" class="perPageDisplay">20 per page</span>
     <select title="sort results" id="sortResults" name="priceDropDown" class="listSort styled_forms perPageSelector" style="opacity:0; width:140px;">
        <option value="20" selected="selected">20 per page</option>  
        <option value="40">40 per page</option>                                              
        <option value="60">60 per page</option>                                              
        <option value="80">80 per page</option>                                              
        <option value="100">100 per page</option>                                                                        
        <option value="120">120 per page</option>                       
     </select>                          
 </div>

【问题讨论】：

给元素一个tabindex属性。
你用的是什么浏览器？它们可以为选择框提供不同的结果。

标签： css drop-down-menu tabs accessibility

【解决方案1】：

首先，确保您发布的代码是正确的。你有opacity:0; 这没有意义......除此之外，它对我来说很好。我能够切换到下拉列表。这是 jsfiddle...

【讨论】：

【解决方案2】：

这是因为 div 默认情况下是不可聚焦的。但是，您可以通过给它一个 tabindex="-1" 属性来使其具有焦点。有关详细说明，请参阅this answer。

【讨论】：

Div 不可聚焦，但默认为选择列表。
没错。但是他将:focus 选择器应用于div，所以我假设他想选择这个元素。当然，如果他想让选择列表成为焦点，那么 webfrogs 的答案是正确的。