Как удалить пунктирную линию вокруг щелкнутого элемента в html

Я обнаружил, что если на странице есть ссылка a, которая не ссылается на новую страницу, тогда, когда пользователь нажимает на нее, вокруг элемента будет пунктирная линия, она исчезнет только тогда, когда пользователь нажмет что-нибудь else на странице, как удалить это?

Пример:

Обратите внимание на пунктирную линию вокруг элемента Section 2.

Ответы

Ответ 1

Использовать outline:none для привязки класса тегов

Ответ 2

Как @Lo Juego сказал, прочитайте статью

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

Ответ 3

a {
    outline: 0;
  }

Но прочитайте это перед изменением:

removing-the-dotted-outline

Ответ 4

Чтобы удалить все очерченные контуры, в том числе теги bootstrap.

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

Примечание. Вы должны добавить ссылку href для bootstrap css перед основным css, поэтому bootstrap не переопределяет ваш стиль.

Ответ 5

Попробуйте с !important в css.

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

Ответ 6

Удаление outline повредит доступности веб-сайта. Поэтому я просто оставляю его там, но делаю его невидимым.

a {
   outline: transparent;
}

Ответ 7

Простая попытка сделать код ниже -

a{
outline: medium none !important;
}

Если счастливые приветствия! Добрый день

Ответ 8

В моем случае это была кнопка, и, видимо, с кнопками это проблема только в Firefox. Решение найдено здесь:

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