Как я могу создать селектор CSS, который будет выделять/выделять целенаправленную вкладку, не влияя на другие виджеты без табуляции?

Question

ПРОБЛЕМА:

Пользователь может использовать клавишу «табуляция», чтобы перемещаться по странице и приземляться на панели «вкладки». Однако, когда они первоначально приземляются на панели «вкладки» - нет визуальной индикации (outline/highlight/etc), что они есть.

В результате они считают, что их вкладка (или панель вкладок) работает некорректно.

Примечания:

Я подозреваю, что это новое поведение обусловлено изменением CSS, которые произошли при обновлении с 1.8.x до 1.10.x - Но, конечно, я не уверен.

Я пробовал различные записи CSS, чтобы вызвать вкладку целенаправленной визуально контура/выделить ...- До сих пор один, который, как представляется, имеет визуальный эффект на вкладке этот селектор:

.ui-widget :focus  
    { 
     border-style: inset !important; 
     border-width: 5px !important; 
    } 

... Но этот селектор слишком широк, и воздействует на другие виджеты на странице, которая находится за пределами вкладок() DIV. - Я хочу «выделить» выделенные вкладки в «вкладках» DIV.

Вопрос:

Как я могу построить селектор CSS, который будет выделить/очертить вкладку целенаправленной, , а не осуществление других не-вкладка виджетов?

(Спасибо за вашу помощь)

JQuery скрипт

$(document).ready(function() { 
     $('#tabdiv').tabs(); //<== tabs 
     $("input[type=submit], a, button").button().click(function(event) {event.preventDefault();});   
     $("#datepicker").datepicker(); 
    }); 

CSS

.ui-widget :focus 
    { 
     border-style: inset !important; 
     border-width: 3px !important; 
    } 

HTML фрагмент

<div> 
     <h1>body-A</h1> 
     <div id="tabdiv"> 
      <ul> 
       <li><a href="#tabA">TabA</a></li>    
       <li><a href="#tabB">TabB</a></li> 
       <li><a href="#tabC">TabC</a></li> 
       <li><a href="#tabD">TabD</a></li> 
      </ul> 
      <div id="tabA"> 
       <div> 
        <span>tabA stuff</span> 
       </div> 
      </div> 
      <div id="tabB"> 
       <div> 
        <span>tabB stuff</span> 
       </div> 
      </div>  
      <div id="tabC"> 
       <div> 
        <span>tabC stuff</span> 
       </div> 
      </div> 
      <div id="tabD"> 
       <div>    
        <span>tabD stuff</span> 
       </div> 
      </div> 
     </div> 
     <div> 
      <p>Date: <input type="text" id="datepicker" /></p> 

      <button>A button element</button> 
      <input type="submit" value="A submit button" /> 
      <a href="#">An anchor</a>   
     </div> 
    </div>   

Answer 1

Оказывается, что в следующих работах ...

.ui-widget#tabdiv :focus 
    { 
     border-style: inset !important; 
     border-width: 3px !important; 
    } 

Спасибо!

Answer 2

Вы можете использовать следующий селектор

[id~=tab]:focus