jquery ui - How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets? -

problem:

the user able utilize "tab" key navigate thru page , land on "tabs" panel. however, when land on "tabs" panel - there no visual indication (outline/highlight/etc) there.

-as result, think tab key (or tab panel) not working correctly.

notes:

my suspicion new behavior due css change occurred when upgrading 1.8.x 1.10.x - but, of course, i'm not sure.

i've tried various css entries cause focused tab visually outline/highlight...-so far, 1 appears have visual effect on tab selector:

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

...but, selector broad , impacts other widgets on page outside of tabs() div. --i want "highlight" focused tabs within "tabs" div.

question:

how can build css selector highlight/outline focused tab, while not effecting other non-tab widgets?

(thanks help)

jquery script

    $(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 snippet

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

you use following selector

[id~=tab]:focus