web-dev-qa-db-fra.com

jQuery UI - supprime la bordure orange de l'onglet

J'essaie de supprimer cette bordure:

enter image description here

et comme il est uniquement visible, je ne parviens pas à trouver la classe à écraser à l’aide de la console chrome.

Quelqu'un a-t-il fait cela et savait quelle classe je devrais écraser?

Edit: Je suppose que c'est le comportement standard et ici vous pouvez voir l'exemple. J'utilise aussi Chrome.

jqueryjquery-uitabsfocusborder
22
gotqn
li a
{
    outline-color: transparent;
}​
49
anon

SOLUTION RAPIDE:

La solution si vous souhaitez affecter l'élément .ui réel. 

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

Quelle était la différence entre la réponse de Anon et Konstantin D?

Anon a à juste titre ciblé la "balise" dans la "balise li." Rappelez-vous toujours, ça tabs (); utilise "une balise" dans la liste non triée. Pour réellement afficher la navigation des onglets.

EXEMPLE:

CSS affecte également le contour sur li: a tags 

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

Lancez le widget Onglets de l'interface utilisateur jQuery 

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

Balisage des onglets en 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>
11
Daniel H. Hemmingsen

J'aime la solution de Daniel, je voudrais juste ajouter ceci:

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

les .ui-state-visited a et .ui-state-focus a arrêtent l'affichage du contour lorsque vous cliquez sur un autre onglet/votre souris quitte la zone de survol

10
Pixelomo

Ma réponse est un mélange de toutes les réponses ci-dessus simples et courtes.

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

réponse acceptée fonctionne dans Firefox mais j’ai eu des problèmes avec Chrome sur un Mac.
l'attribut style de contour a semblé résoudre ce problème pour moi.

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

Vous pouvez remplacer les classes ui-state-focus et ui-state-active css. 

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

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

Dans le cas de onglets de l'interface utilisateur jQuery, remplacer ui-state-active devrait suffire.

Update: Dans votre cas, il ne s'agit pas de la classe ui-state-active, mais du contour d'ancrage normal dans webkit. J'ai mis à jour votre violon: http://jsfiddle.net/ukPW6/4/

1
Konstantin Dinev

JQuery mobile applique les classes au moment de l’exécution, j’ai essayé les solutions ci-dessus, mais cela n’a pas fonctionné pour moi, puis j’ai supprimé ui-shadow class form <div data-role="navbar" class="ui-corner-all">

0
Rudresh Bhatt

Si les solutions ci-dessus ne fonctionnent toujours pas, cela est dû à la propriété box-shadow. Essaye ça:

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