come rimuovere la linea tratteggiata attorno all'elemento cliccato in html

114

Ho scoperto che se anella pagina è presente un collegamento che non si collega a una nuova pagina, quando l'utente fa clic su di esso, ci sarà una linea tratteggiata attorno all'elemento, scomparirà solo quando l'utente fa clic su qualsiasi altra cosa nella pagina, come rimuovere questo?

Esempio:

inserisci qui la descrizione dell'immagine

Notare la linea tratteggiata attorno all'elemento Section 2.

html css

— HGUSER
fonte

Come mantenere la struttura per la tabulazione tra gli elementi, ma rimuoverla quando si fa clic su di essa?

— Costa

198

Utilizzare outline:noneper ancorare la classe del tag

— Sowmya
fonte

Grazie ma non funziona per me, ho creato così tanti link in precedenza che non ho mai avuto questo problema fino ad ora. ma ora sono confuso quindi qual è il motivo precedente al presente?

— Durga Rao

17

Tieni presente che ciò danneggerà l' accessibilità del tuo sito web.

— mike23

3

@ Durgaprasad vedi la risposta di Marks. Devi applicarlo a:active, a:focusanche a.

— Odys

Sono d'accordo con mike23. Il mio tentativo di raggiungere un compromesso è, sull'evento clic (o forse il mouseup sarebbe ancora meglio?), Rimuovere la struttura solo per quel collegamento (ripristinando anche tutti i collegamenti per avere una struttura subito prima di detta rimozione. . altrimenti le cose si bloccano cumulativamente senza essere delineate). Questo rimuove temporaneamente il contorno dall'ultimo elemento cliccato mantenendolo sugli altri, così puoi ancora sapere cosa stai tabulando.

— Max Starkenburg

1

@cpu_meltdown Tryinput:focus{outline: none}

— Sowmya

55

Come ha detto @Lo Juego, leggi l'articolo

a, a:active, a:focus {
   outline: none;
}

— marchio
fonte

12

a {
    outline: 0;
  }

Ma leggi questo prima di cambiarlo:

rimozione-the-punteggiato di ingombro

— Lo Juego
fonte

8

Prova con !importantdentro css.

a {
  outline:none !important;
}
// it is `very important` that there is `no` `outline` for the `anchor` tag.  Thanks!

— Akash
fonte

7

Per rimuovere tutti i contorni stravaganti, inclusi quelli nei bootstraptemi.

a, a:active, a:focus, 
button, button:focus, button:active, 
.btn, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus {
    outline: none;
    outline: 0;
}

input::-moz-focus-inner {
    border: 0;
}

Nota: dovresti aggiungere il link href per bootstrap css prima del css principale, quindi bootstrap non sovrascrive il tuo stile.

— OldTrain
fonte

3

La rimozione outlinedanneggerà l'accessibilità di un sito Web, quindi lo lascio lì ma lo rendo invisibile.

a {
   outline: transparent;
}

— chankruze
fonte

1

L'impostazione della struttura trasparente danneggia ancora l'accessibilità del tuo sito web. L'idea è che fornisce un indicatore visivo che un elemento è focalizzato. Se lo rendi non visibile, quell'indicatore viene perso. Maggiori info qui: outlinenone.com

— ktbee

1

Nel mio caso era un pulsante e, a quanto pare, con i pulsanti, questo è solo un problema in Firefox. Soluzione trovata qui :

button::-moz-focus-inner {
  border: 0;
}

— Andrea
fonte

0

È semplice provare sotto il codice -

a{
outline: medium none !important;
}

Se applausi felice! Buona giornata

— Loyola
fonte