jak usunąć przerywaną linię wokół klikniętego elementu w html

114

Zauważyłem, że jeśli na stronie jest alink, który nie prowadzi do nowej strony, to po kliknięciu go przez użytkownika pojawi się kropkowana linia wokół elementu, zniknie tylko wtedy, gdy użytkownik kliknie cokolwiek innego na stronie, jak usunąć to?

Przykład:

wprowadź opis obrazu tutaj

Zwróć uwagę na przerywaną linię wokół elementu Section 2.

html css hguser
źródło
Jak zachować kontur przechodzenia przez elementy tabulatorami, ale usuwać go po kliknięciu?
Costa

Odpowiedzi:

198

Służy outline:nonedo zakotwiczenia klasy znacznika

Sowmya
źródło
Dzięki, ale to nie działa dla mnie, utworzyłem tak wiele linków wcześniej, że nigdy nie mam tego problemu do tej pory. ale teraz jestem zdezorientowany, więc jaki jest powód poprzedniego przedstawienia?
Durga Rao
17
Zwróć uwagę, że wpłynie to negatywnie na dostępność Twojej witryny.
mike23
3
@Durgaprasad zobacz odpowiedź Marksa. Musisz to a:active, a:focusrównież zastosować.
Odys,
Zgadzam się w / Mike23. Moja próba osiągnięcia kompromisu polega na tym, że w przypadku kliknięcia (a może podjechanie myszą byłoby jeszcze lepsze?), Usunąć kontur tylko tego linku (jednocześnie resetując wszystkie linki z powrotem, aby miały kontur tuż przed usunięciem). . w przeciwnym razie rzeczy utkną kumulatywnie, będąc nieokreślone). Spowoduje to tymczasowe usunięcie konturu z ostatnio klikniętego elementu, pozostawiając go na innych, dzięki czemu nadal możesz wiedzieć, przez co przechodzisz.
Max Starkenburg
1
@cpu_meltdown Wypróbujinput:focus{outline: none}
Sowmya
55

Jak powiedział @Lo Juego, przeczytaj artykuł

a, a:active, a:focus {
   outline: none;
}
znak
źródło
8

Spróbuj !importantw css.

a {
  outline:none !important;
}
// it is `very important` that there is `no` `outline` for the `anchor` tag.  Thanks!
Akash
źródło
7

Aby usunąć wszystkie kropkowane kontury, w tym te w bootstrapmotywach.

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;
}

Uwaga: Powinieneś dodać link href dla bootstrap css przed głównym css, więc bootstrap nie nadpisuje twojego stylu.

OldTrain
źródło
3

Usunięcie outlinewpłynie negatywnie na dostępność strony internetowej, dlatego po prostu ją tam zostawiam, ale sprawiam, że będzie niewidoczna.

a {
   outline: transparent;
}
chankruze
źródło
1
Ustawienie konturu jako przezroczystego nadal szkodzi dostępności Twojej witryny. Chodzi o to, że zapewnia wizualny wskaźnik skupienia elementu. Jeśli sprawisz, że będzie niewidoczny, ten wskaźnik zostanie utracony. Więcej informacji tutaj: outlinenone.com
ktbee
1

W moim przypadku był to przycisk i podobno z przyciskami to tylko problem w Firefoksie. Rozwiązanie znalezione tutaj :

button::-moz-focus-inner {
  border: 0;
}
Andrzej
źródło
0

Jego prosta wypróbuj poniższy kod -

a{
outline: medium none !important;
}

Jeśli szczęśliwe okrzyki! Dobry dzień

loyola
źródło