Drop down not getting highlighted when using keyboard tab

Question

I am trying to highlight the focus of a drop down (just using keyboard tab) but for some reason the drop down doesn't get highlighted even when its in focus. Can someone help me fixing this issue?

I even tried using the below CSS class but for some reason focus is not working but hovering is working fine as expected..

CSS:

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

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

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

HTML code:

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

What browser are you using? They can give different results for select boxes. — AlastairC, Sep 12 '13 at 16:16

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

That is because a div is not focusable by default. However you make it focusable by giving it a tabindex="-1" attribute. See this answer for a longer explanation.

edited May 23 '17 at 10:25

Community

1
1

answered Sep 11 '13 at 20:22

Jan

1,394
10
12

Div is not focusable, but a select list is by default. – stringy Sep 12 '13 at 09:11
That's right. But he applied the `:focus` selector to the `div`, so I assumed, he wants to select this element. Of cource, if he wants the select list to focus, then webfrogs answer is correct. – Jan Sep 13 '13 at 10:08

score 0 · Answer 2 · answered Sep 11 '13 at 20:30

0

First of all, make sure the code you're posting is correct. You have opacity:0; which doesn't make sense... Beyond that, it's working fine for me. I was able to tab over to the dropdown. Here's a jsfiddle...

answered Sep 11 '13 at 20:30

Millhorn

2,953
7
39
77

Drop down not getting highlighted when using keyboard tab

2 Answers2