Bootstrap Toggable Tabs - Entfernen von Outline / Fokus?

Ich bin mit Toggable Tabs von Twitters Bootstrap

Habe ich das problem, Auch Sie können sehen, aus dem Beispiel zu. Dass, wenn der Benutzer klickt auf die Registerkarte, Die aktive Registerkarte ist die gepunktete Linie um ihn herum.

Ich bin mit Firefox 11. Screenshot von dem Problem:

Bootstrap Toggable Tabs - Entfernen von Outline /Fokus?

Ich bin auf der Suche, um loszuwerden, punktierte Grenze. Weiß jemand wie Sie dies tun?

Dank

InformationsquelleAutor der Frage StuBlackett | 2012-03-20

  1. 48

    versuchen Sie es mit outline: 0; auf das link-element. sehen css-tricks.com/removing-the-dotted-outline 

    //line 2576 of bootstrap.css
.nav-tabs > .active > a, .nav-tabs > .active > a:hover { 
outline: 0;
color: #555555;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}

    InformationsquelleAutor der Antwort Tim

  2. 11

    Du meinst die outline, entfernen Sie es wie folgt:

    .nav-tabs > .active > a, .nav-tabs > .active > a:hover {
  outline:none;
}

    Obwohl ich würde vorschlagen, Sie lassen Sie es in, da es dort zum Teil zu helfen, Menschen mit Behinderungen und Bildschirm-Lesegeräte zeigen Sie Ihre Inhalte richtig, so würden Sie sich auf Benutzerfreundlichkeit, indem es zu entfernen.

    InformationsquelleAutor der Antwort Andres Ilich

  3. 6

    Verwenden Sie folgenden CSS auf Ihrer Seite:

    html * {
    outline: 0 !important;
}

    InformationsquelleAutor der Antwort user3900576

  4. 2

    Lösen das Problem für Firefox und alle anderen Browser, ich würde verwenden Sie die folgende CSS:

    /* Remove dotted outline from image inputs */
input::-moz-focus-inner {
  border: 0;
}

/* Remove dotted outline from all links */
a {
 outline: 0;
}

    InformationsquelleAutor der Antwort Graham Swan

  5. 2

    Konzentrieren Grenze ist ein accessibility-feature. Indem Sie es, Sie werden behindern, einige sind in der Lage, Ihre Website zugreifen. Von einigen, ich meine, Menschen mit Behinderungen.

    Dieses video hilft, meinen Standpunkt (er hat eine Behinderung Mobilität). (Hier ist es weitergeleitet zu, wenn er die Karpfen auf die Beseitigung der Grenze.)

    InformationsquelleAutor der Antwort Merovex

  6. 2

    Können Sie die Beispiel unten 😉 

    .nav > li > a {
    outline:none;
}

    InformationsquelleAutor der Antwort Ricardo Vieira

  7. 1

    Der einfachste Weg, wenn Sie kompilieren Sie die CSS aus Weniger, fallen Sie diesen code in Ihre weniger Dateien

    .tab-focus() {
  outline: 0;
}

    Das ist es.

    InformationsquelleAutor der Antwort thednp

  8. 0

    Die "deaktiviert" - Klasse oder der Staat selbst ist NICHT für Hilfsmittel.

    Ich weiß nicht, wo diese information her kam, aber es ist völlig falsch.
    'Deaktiviert' ist ein ZUSTAND, wobei die Taste oder Anker ist NICHT AKTIVIERT. D. H. der Benutzer kann nicht klicken Sie auf es. Oder, klicken Sie löst keine Aktion aus. Menschen mit Behinderungen sind in keiner Weise beeinträchtigt, die durch die Nutzung dieses Tags. BTW - ich bin web-Entwickler/designer für non-profit, die bietet Unterstützung und Dienstleistungen für Menschen mit Behinderungen und ich Teste meine Seiten auf einer Vielzahl von Geräten, einschließlich screen Reader und andere assistive Technologien.

    Die Klasse für eine Registerkarte mit Fokus .focus und die Klasse für die aktive Registerkarte ist .active.

    Entwerfen für die Zugänglichkeit ist entscheidend, damit Sie immer überprüfen Sie Ihren code mit einem W3C-konformen Prüfung (wie https://validator.w3.org/). Gelegentlich, ich habe manuell die Kontrolle der tab-Taste oder, um für die tabs auf eine Website per JavaScript-aber, im Allgemeinen, Bootstrap behandelt es ziemlich gut.

    Beispiel:
    Ich benutze die .disabled - Klasse für web-Formulare, die ganze Zeit. Ich habe den Submit-button solange deaktiviert, bis Sie alle erforderlichen Felder enthalten die richtigen Informationen. Dann, entfernen Sie einfach die .disabled Klasse und es Ihnen ermöglichen, sich zu Unterwerfen.

    Sagte, Sie tun müssen, um eine Grenze auf, konzentriert/hover-Elemente für Hilfsmittel. Dies ermöglicht dem Benutzer zu verfolgen, was Sie 'schweben' auf Ihrer Website. Wie oben erwähnt, können Sie umzugestalten, um Sie besser an Ihr design oder was auch immer, aber stellen Sie sicher, dass Sie etwas zu geben zu konzentrieren.

    Wenn jemand Bekämpfung Infos dazu, wäre ich daran interessiert, es zu Lesen.

    InformationsquelleAutor der Antwort Dan Kaufman

Schreibe einen Kommentar