jQuery UI - rimuovere arancione scheda confine a fuoco

Question

Sto cercando di rimuovere questo confine:

e poiché mostrato solo a fuoco non sono in grado di trovare quale classe per sovrascrivere utilizzando la console di cromo .

Qualcuno ha fatto questo e sapeva qual è la classe che dovrei sovrascrivere?

Modifica: suppongo che questo è il comportamento standard e here è possibile vedere l'esempio. Sto anche usando Chrome.

Answer 1

li a 
{ 
    outline-color: transparent; 
}​ 

Answer 2

È possibile ignorare le classi CSS e ui-state-focusui-state-active.

.ui-state-focus { 
    border: none; 
    outline: none; 
} 

.ui-state-active { 
    border: none; 
    outline: none; 
} 

Nel caso di jQuery UI linguette prevalente ui-state-active dovrebbe essere sufficiente.

Aggiornamento: Nel tuo caso questa non è la classe attiva dello stato ui ma piuttosto il normale schema di ancoraggio nel webkit. Ho aggiornato il vostro violino: http://jsfiddle.net/ukPW6/4/

Answer 3

soluzione rapida:

La soluzione se si vuole influenzare l'elemento effettivo .ui.

.ui-state-active a, .ui-state-hover a { 
    outline: none; 
} 

quale fosse la differenza tra l'Anon e Konstantin D's risposta?

Anon ha mirato il vero "tag" all'interno del tag "li". Ricorda sempre che le schede(); usa "un tag" all'interno della lista non ordinata. Per visualizzare effettivamente la navigazione delle schede.

ESEMPIO:

CSS troppo influenzano la sagoma su Li: un tag

.ui-state-active a, .ui-state-hover a { 
    outline: none; 
} 

Fuoco il widget di jQuery UI Tabs

$('#my-tabs').tabs(); 

Tabs Markup in HTML

<div id="my-tabs"> 
    <ul> 
     <li><a href="#tab-1">Tab 1</a></li> 
     <li><a href="#tab-2">Tab 1</a></li> 
    </ul> 
    <div id="tab-1"></div> 
    <div id="tab-2"></div> 
</div> 

Answer 4

mi piace la soluzione di Daniel, che avevo appena aggiungi a ad esso:

.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a { 
    outline: none; 
} 

fermata .ui-state-visited a & .ui-state-focus a che mostra la delineazione quando si fa clic su una scheda diversa/il mouse lascia l'area hover

Answer 5

la mia risposta è mix di tutte le risposte di cui sopra uso semplice e breve il seguente

.ui-tabs .ui-tabs-nav li a { 
    outline:none; 
} 

Answer 6

risposta accettata funziona in Firefox ma ho avuto problemi con esso in Chrome su un Mac.
l'attributo stile contorno sembrava risolvere questo per me.

.ui-state-focus { 
     outline-style:none; 
    } 

Answer 7

Se le soluzioni di cui sopra ancora non funzionano, allora è causato dalla proprietà box-shadow. Prova questo:

.ui-state-focus:focus, .ui-state-focus, li a { 
    box-shadow:none; 
} 

Answer 8

Stavo affrontando lo stesso problema. jQuery mobile applica le classi in fase di runtime, ho provato sopra le soluzioni ma non ha funzionato per me quindi ho rimosso ui-shadow modulo di classe <div data-role="navbar" class="ui-corner-all"> che ha soddisfatto il mio requisito.