ich diese Grenze zu entfernen versuchen:jQuery UI - entfernen Orange Tab Grenze auf Fokus
und da es nur auf Fokus gezeigt Ich bin nicht in der Lage, die Klasse zu überschreiben mit der Chromkonsole zu finden .
Hat jemand getan und wusste, was die Klasse, die ich überschreiben sollte?
Edit: Ich nehme an, dies das Standardverhalten ist und here Sie das Beispiel sehen kann. Ich verwende auch Chrome.
können Sie überschreiben die ui-state-focus und ui-state-active CSS-Klassen.
.ui-state-focus {
border: none;
outline: none;
}
.ui-state-active {
border: none;
outline: none;
}
Im Fall von jQuery UI Tabs überwiegenden ui-state-active soll ausreichend sein.
Update: In Ihrem Fall ist dies nicht die UI-State-Active-Klasse, sondern die regelmäßige Anker Umriss in Webkit. Ich habe Ihre Geige aktualisiert: http://jsfiddle.net/ukPW6/4/
Dies scheint nicht in ie9 oder Chrom zu arbeiten, Für welchen Browser ist das? –
Alle Browser. Stellen Sie sicher, dass Sie es außer Kraft setzen, nachdem Sie die jQuery-Benutzerschnittstelle css eingefügt haben. Sie finden es in der CSS-Oberfläche von jQuery-UI. Der Abschnitt für jede Komponente wird in der Debug-Version durch einen Kommentar getrennt. –
Ich habe das versucht und es scheint keinen Unterschied zu machen, vielleicht braucht es! Wichtig oder vielleicht etwas über jsfiddle stoppt es zu arbeiten, werfen Sie einen Blick http://jsfiddle.net/axrwkr/ukPW6/ –
Die Lösung, wenn Sie das tatsächliche .ui Element beeinflussen mögen.
.ui-state-active a, .ui-state-hover a {
outline: none;
}
Was war der Unterschied zwischen Anon und Antwort s Konstantin D'?
Anon richtete zu Recht das eigentliche "a tag" innerhalb des "li-Tags" an. Denken Sie immer daran, dass tabs(); verwendet "a tags" innerhalb der unsortierten Liste. Um die Tab-Navigation tatsächlich anzuzeigen.
zu CSS die Umrisse auf li beeinflussen: eine Tags
.ui-state-active a, .ui-state-hover a {
outline: none;
}
Feuer die jQuery UI Tabs Widget
$('#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>
I Daniel-Lösung gefällt, würde ich nur dies, um es hinzuzufügen:
.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a {
outline: none;
}
die .ui-state-visited a & .ui-state-focus a Stopp es die Konturierung zeigt, wenn Sie auf eine andere Registerkarte klicken/Maus verlässt den Hover-Bereich
Meine Antwort ist Mischung aus allen oben genannten Antworten einfach und kurz Verwendung der folgenden
.ui-tabs .ui-tabs-nav li a {
outline:none;
}
Perfekt. Kurz, süß, klar und funktionierte sofort. – clearlight
akzeptierte Antwort funktioniert in Firefox, aber ich hatte Probleme in Chrome auf einem Mac.
das Umriss-Stil-Attribut schien dies für mich zu lösen.
Hallo @jsh, danke für das Hinzufügen. Ich hatte nie die Änderung, um das auf Mac zu testen. – gotqn
Wenn die obigen Lösungen immer noch nicht funktionieren, dann wird es durch box-shadow Eigenschaft verursacht. Versuchen Sie dies:
.ui-state-focus:focus, .ui-state-focus, li a {
box-shadow:none;
}
Ich war mit demselben Problem konfrontiert. jQuery Mobile wendet Klassen zur Laufzeit an, ich versuchte oben Lösungen, aber es hat nicht funktioniert für mich, dann entfernte ich ui-shadow Klassenformular <div data-role="navbar" class="ui-corner-all"> Das erfüllte meine Anforderung.
das ist Verhalten Ihres Browsers nicht im Zusammenhang mit CSS, überprüfen Sie durch Öffnen in Firefox –
@rajeshkakawat Firefox zeigt nicht die Gliederung, sondern ie und Chrom zu tun. Hier ist ein Beispiel http://jsfiddle.net/axrwkr/4F6z6/ remove li a {Umrissfarbe: transparent; } aus dem CSS-Tab, um den Unterschied in Chrom oder ie –