jquery - for - https getbootstrap com docs 4.1 getting started introduction



Schede Togglable di Bootstrap-Rimozione di outline/focus? (6)

Sto usando Toggable Tabs da Twitters Bootstrap

Il problema che ho, anche tu puoi vedere dall'esempio. Che quando l'utente fa clic sulla scheda, la scheda attiva ha il bordo tratteggiato attorno ad essa.

Sto usando Firefox 11. Screenshot del problema:

Sto cercando di sbarazzarmi di quel confine tratteggiato. Qualcuno sa come lo fai?

Grazie


Answer #1

Il modo più semplice, se si compila il CSS da Meno, rilascia questo codice nei file meno

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

Questo è tutto.


Answer #2

Intendi il contorno, puoi rimuoverlo come segue:

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

Anche se ti suggerirei di lasciarlo, dato che è lì in parte per aiutare le persone con disabilità e gli screen reader a mostrare i tuoi contenuti in modo corretto, quindi potresti comprometterne l'usabilità rimuovendoli.


Answer #3

Puoi usare l'esempio qui sotto;)

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

Answer #4

Quel bordo di messa a fuoco è una caratteristica di accessibilità. Rimuovendolo, stai impedendo ad alcuni di accedere al tuo sito. Per alcuni, intendo le persone con disabilità.

Questo video aiuta ad ottenere il mio punto (ha una disabilità motoria). ( Qui è inoltrato a quando si accarezza la rimozione del bordo).


Answer #5

La classe 'disabled' o lo stato stesso NON è per i dispositivi di assistenza.

Non so da dove provengano queste informazioni, ma è completamente falso. 'Disabled' è uno STATO in cui il pulsante o l'ancora NON è ABILITATO . Il che significa che l'utente non può cliccarci sopra. Oppure, facendo clic su di esso non si attiva alcuna azione. Le persone con disabilità non sono influenzate in alcun modo dall'uso di questo tag. BTW- Io sono lo sviluppatore / progettista di un sito Web senza scopo di lucro che fornisce supporto e servizi alle persone con disabilità e collaudo le mie pagine su una varietà di dispositivi, inclusi screen reader e altri dispositivi di assistenza.

La classe per una scheda con focus è .focus e la classe per la scheda attiva è .active .

Progettare per l'accessibilità è fondamentale quindi controlla sempre il tuo codice con un validatore compatibile con W3C (come https://validator.w3.org/ ). Occasionalmente, ho dovuto controllare manualmente la tabulazione o l'ordine delle frecce per le schede su un sito tramite JavaScript ma, in generale, Bootstrap lo gestisce piuttosto bene.

Esempio: utilizzo sempre la classe .disabled per i moduli Web. Ho il pulsante Invia disabilitato fino a quando tutti i campi richiesti contengono le informazioni corrette. Quindi, rimuovi semplicemente la classe .disabled e consenti loro di inviare.

Detto questo, è necessario includere un bordo sugli elementi focalizzati / al passaggio del mouse per i dispositivi di assistenza. Ciò consente all'utente di essere in grado di rintracciare ciò che sta "stazionando" sul tuo sito. Come accennato in precedenza, puoi ridimensionarlo per adattarlo meglio al tuo design o qualsiasi altra cosa, ma assicurati di avere qualcosa per indicare la messa a fuoco.

Se qualcuno ha informazioni contrastanti su questo sarei interessato a leggerlo.


Answer #6

prova a usare outline: 0; sull'elemento link. vedi 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;
}




twitter-bootstrap