Supprimer le contour à partir d'active de jQuery UI onglet?

Je veux supprimer le contour sur un actif de jQuery UI onglet (ou au moins changer la couleur).

De travail de cet exemple, j'ai essayé sans succès:

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

(basée sur un conseil de ce la question et la réponse).

Quelle est l'astuce pour enlever le contour à partir d'un onglet actif?

OriginalL'auteur jedierikb | 2013-01-03

24

Je ne crois pas que c'est la classe focus que vous avez besoin pour cible, c'est le CSS pseudo-classe :focus

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

si cela fonctionne, aller avec {outline:none} pour l'enlever. Vous êtes sorte de monter votre accessibilité par inquiéter si, pour info.

hélas, il ne semble pas fonctionner: jsfiddle.net/xJ9Zr/1
Oui, c'est fait... cliquez à l'intérieur de la fenêtre de Résultat, et hit <TAB> (vous devriez voir une ligne rouge en pointillés autour du premier onglet de l'élément). Peut-être que nous sommes encore en pourparlers avec différentes questions?
Ah, cool, je vois que maintenant. Mais dans mac-chrome, en cliquant sur un onglet met une bordure bleue autour de la même onglet. Je suis en train de changer.
Il a quelque chose à voir avec la façon fine de votre sélection est. À l'aide de *:focus { outline:none } fonctionne, mais le fait de #tabs ul li a:focus { outline:none; /* outline-color:red */; } - coller le CSS dans votre violon, vous allez voir. Mac Lion & Chrome testé
Pour prouver ma déclaration ci-dessus de remplacer votre classe de base '.l'interface utilisateur....' sélecteur dans le violon, tu m'a passé avec #tabs ul li a:focus, #tabs ul li:focus. Ne pas modifier le CSS. Maintenant, sur click/active, et <TAB> ce qui était autrefois une lumière floue bleu sera la ligne rouge en pointillés.

OriginalL'auteur
23

Il y a beaucoup de façons de le faire. Voici deux exemples (je suggère option 2):

Option 1

Supprimer le contour de tous les éléments qui utilisent le .ui-widget classe:
```
.ui-widget * { outline: none; }
```
Voici un travail de violon.

Option 2

Faire de la couleur du contour transparent:
```
#tabs li a
{
    outline-color: none;
}
```
Voici un travail de violon.

Sur un Mac, outline-color:transparent de modifier la couleur par défaut en bleu pour une couleur graphite. (OS X Lion + Chrome)
d'accord. Il suffit de remplacer avec outline: none;
Cela a fonctionné pour moi, où l'on a accepté la réponse n'a pas pour une raison quelconque. Merci!!!!

OriginalL'auteur
15

J'ai réussi à l'enlever avec
```
.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
     outline:none;
}
```
Cela a été le seul à travailler pour moi.

OriginalL'auteur
4

si vous souhaitez supprimer le contour seulement sur un des onglets spécifiques alors 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.

félicitations pour votre première réponse! assurez-vous d'avoir un coup d'oeil à markdown (message de mise en forme de la syntaxe) page d'aide.

OriginalL'auteur
3

Vous pouvez désactiver le contour en précisant outline-width: 0;
```
#tabs li a
{
    outline-width: 0;
}
```
Plus générique de solution sans l'aide IDs serait:
```
.ui-tabs ul li a
{
    outline-width: 0;
}
```
Démo: http://jsfiddle.net/ebCpQ/

Cela exige je sais que le div id à l'avance. Je suis de la création dynamique d'onglets (avec auto-généré ida), donc je crois que j'aurais à insérer dynamiquement css pour utiliser cette solution?
Vous n'avez pas besoin d'utiliser l'ID. Voir mon edit.

OriginalL'auteur
3

J'ai dû le faire pour éviter d'éventuelles initiale de l'ordre de tabulation accent trop:
```
.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a, .ui-state-focus:focus {
    outline:none;
}
```
Merci! Ce enlevé le bleu de souligner dans la concentre actuellement sur l'onglet!

OriginalL'auteur
1

vous pouvez essayer ce
```
a:focus { outline: none; } 
```
OriginalL'auteur
0

Pour le rendre plus clair, le contour s'affiche sur l'élément à l'intérieur de l'ul.ui-tabs li.ui-tabs-nav.
La plupart des exemples ci-dessus oublié de mentionner ceci: donc, ici, est une réponse pour la question d'origine:
```
.ui-tabs-nav .ui-state-focus a {
    outline: none;
}     
```
http://jsfiddle.net/xJ9Zr/5/

OriginalL'auteur
0

Curieusement, rien de tout cela a fonctionné pour moi. J'ai dû ajouter une bordure à obtenir le contour (ou peut-être que c'était une bordure bleue) pour aller loin:
```
.ui-state-hover, .ui-state-focus, .ui-state-active
{
    border: 1px solid #ccc !important; /*Or any other color*/
    border-bottom: 0 !important;
} 
```
OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.