web-dev-qa-db-fra.com

Supprimer le contour de l'onglet d'interface utilisateur jQuery actif?

Je veux supprimer le contour sur un onglet d'interface utilisateur jQuery actif (ou au moins changer la couleur).

En partant de cet exemple, j’ai essayé sans succès:

<style>
    #tabs .ui-state-focus
    {
        outline: none;
    }
</style>

(basé sur un conseil de cette question et réponse ).

Quelle est l'astuce pour supprimer le contour d'un onglet actif?

cssjquery-uijquery-ui-tabs
15
jedierikb

Je ne crois pas que ce soit la classe focus que vous ayez besoin de cibler, c'est le CSS psuedo-class :focus

.ui-state-focus:focus { outline:1px dotted red !important }

si cela fonctionne, utilisez {outline:none} pour le supprimer. Vous êtes en quelque sorte en train d'augmenter votre accessibilité en vous inquiétant de ça, FYI.

24
Dawson

Il y a plusieurs manières de faire ça. Voici deux exemples (je suggère l'option 2):

Option 1

Supprimez le contour de tous les éléments utilisant la classe .ui-widget:

.ui-widget * { outline: none; }​

Voici un violon qui travaille .

Option 2

Rendre la couleur de contour transparente:

#tabs li a
{
    outline-color: none;
}​

Voici un violon qui travaille .

23
James Hill

J'ai réussi à l'enlever avec

.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
     outline:none;
}
15
DannyG

si vous souhaitez supprimer le contour uniquement sur un onglet spécifique, je vous suggère d'utiliser les éléments suivants:

$("#tabs ul li").css({'outline': 'none'}); // where #tabs can be any specific tab group

à l'intérieur de la balise de script de votre code HTML.

4
Gabriel N.

Vous pouvez désactiver le contour en spécifiant outline-width: 0;

#tabs li a
{
    outline-width: 0;
}​

Une solution plus générique sans utiliser d'identifiant serait:

.ui-tabs ul li a
{
    outline-width: 0;
}​

Démo : http://jsfiddle.net/ebCpQ/

3
techfoobar

Je devais le faire pour empêcher le focus possible sur l'ordre de tabulation initial

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

tu peux essayer ça

a:focus { outline: none; }
1
Arsalan

Curieusement, rien de tout cela n'a fonctionné pour moi. J'ai dû ajouter une bordure pour obtenir le contour (ou peut-être que c'était une bordure bleue) pour s'en aller:

.ui-state-hover, .ui-state-focus, .ui-state-active
{
    border: 1px solid #ccc !important; /*Or any other color*/
    border-bottom: 0 !important;
}
0
deebs

Pour que ce soit plus clair, le contour apparaît sur l'élément à l'intérieur de ul.ui-tabs, li.ui-tabs-nav. La plupart des exemples ci-dessus ont oublié de mentionner ceci: voici donc une réponse utile à la question initiale:

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

http://jsfiddle.net/xJ9Zr/5/

0
Frankey