title: Drop down not getting highlighted when using keyboard tab
body: <p>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?</p>
  
  <p>I even tried using the below CSS class but for some reason focus is not working but hovering is working fine as expected.. </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#selector:focus{ 
        outline: #177f7f dotted medium; 
   }
  
  #selector:hover{ --&gt; works!!!
         outline: #177f7f dotted medium; 
    }
  
  #sortResults:focus{ 
          outline: #177f7f dotted medium; 
   }
  </code></pre>
  
  <p><strong>HTML code:</strong></p>
  
  <pre><code>&lt;div class="selector" id="selector" style="float:right;"&gt;
  &lt;span style="width: 95px; padding:0 1px; padding:1px;" class="perPageDisplay"&gt;20 per page&lt;/span&gt;
       &lt;select title="sort results" id="sortResults" name="priceDropDown" class="listSort styled_forms perPageSelector" style="opacity:0; width:140px;"&gt;
          &lt;option value="20" selected="selected"&gt;20 per page&lt;/option&gt;  
          &lt;option value="40"&gt;40 per page&lt;/option&gt;                                              
          &lt;option value="60"&gt;60 per page&lt;/option&gt;                                              
          &lt;option value="80"&gt;80 per page&lt;/option&gt;                                              
          &lt;option value="100"&gt;100 per page&lt;/option&gt;                                                                        
          &lt;option value="120"&gt;120 per page&lt;/option&gt;                       
       &lt;/select&gt;                          
   &lt;/div&gt;
  </code></pre>