webentwicklung-frage-antwort-db.com.de

jQuery UI - Entfernen Sie den orangefarbenen Tabulatorrahmen

Ich versuche diese Grenze zu entfernen:

enter image description here

und da es nur im Fokus dargestellt wurde, kann ich nicht herausfinden, welche Klasse mit der Chrome-Konsole überschrieben werden soll.

Hat jemand das getan und gewusst, was die Klasse ist, die ich überschreiben sollte?

Edit: Ich denke das ist das Standardverhalten und hier Sie können das Beispiel sehen. Ich benutze auch Chrome.

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

SCHNELLE LÖSUNG:

Die Lösung, wenn Sie das tatsächliche .ui-Element beeinflussen möchten.

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

Was war der Unterschied zwischen Anon und Konstantin Ds Antwort?

Anon zielte zu Recht auf das eigentliche "a-Tag" im "li-Tag" ab. verwendet "Tags" in unsortierter Liste. Um die Navigation der Registerkarten tatsächlich anzuzeigen.

BEISPIEL:

Auch CSS beeinflusst die Gliederung von li: a tags

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

Das Widget für die jQuery-UI-Tabs feuern

$('#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>
11

Ich mag Daniels Lösung, ich würde einfach folgendes hinzufügen:

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

der .ui-state-visited a & .ui-state-focus a stoppt die Anzeige der Gliederung, wenn Sie auf eine andere Registerkarte klicken

10
Pixelomo

Meine Antwort ist eine Mischung aus allen obigen Antworten

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

akzeptierte Antwort funktioniert in Firefox, aber ich hatte Probleme mit Chrome auf einem Mac.
Das Attribut im Gliederungsstil schien das für mich zu lösen.

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

Sie können die Klassen ui-state-focus und ui-state-active css überschreiben. 

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

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

Im Fall von jQuery UI-Registerkartensollte _ das Überschreiben von ui-state-active ausreichen.

Update : In Ihrem Fall ist dies nicht die Ui-State-aktive Klasse, sondern die reguläre Ankerkontur im Webkit. Ich habe Ihre Geige aktualisiert: http://jsfiddle.net/ukPW6/4/

1

Ich stand vor demselben Problem. JQuery mobile wendet Klassen zur Laufzeit an, ich habe die obigen Lösungen ausprobiert, aber es funktionierte nicht für mich. Dann entfernte ich ui-shadow class form <div data-role="navbar" class="ui-corner-all"> meine anforderung.

0
Rudresh Bhatt

Wenn die oben genannten Lösungen immer noch nicht funktionieren, wird dies durch die box-shadow-Eigenschaft verursacht. Versuche dies:

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