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

115

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

Пример:

введите описание изображения здесь

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

html css

— hguser
источник

Как сохранить контур для перехода по элементам, но удалить его при нажатии?

— Costa

199

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

— Sowmya
источник

Спасибо, но у меня это не работает, я уже создал так много ссылок, что до сих пор никогда не сталкивался с этой проблемой. но теперь я в замешательстве, так в чем причина предыдущего представления?

— Дурга Рао

17

Учтите, что это повредит доступность вашего сайта.

— mike23 06

3

@Durgaprasad см. Ответ Марка. Вы должны применить это a:active, a:focusтакже к.

— Odys

Согласен с mike23. Моя попытка достичь компромисса заключается в том, чтобы в событии щелчка (или, возможно, было бы лучше?), Удалить схему только для этой ссылки (при этом также сбросив все и все ссылки обратно, чтобы иметь схему прямо перед указанным удалением .. ... иначе вещи накапливаются застрявшими без описания). Это временно удаляет контур последнего нажатого элемента, сохраняя его на других, так что вы все еще можете знать, через что вы переходите.

— Макс Старкенбург,

1

@cpu_meltdown Попробуйтеinput:focus{outline: none}

— Sowmya

55

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

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

— отметка
источник

12

a {
    outline: 0;
  }

Но прочтите это, прежде чем менять:

удаление пунктирного контура

— Lo Juego
источник

8

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

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

— Акаши
источник

7

Чтобы удалить все помеченные наброски, в том числе в 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 для начальной загрузки css перед основным CSS, чтобы начальная загрузка не переопределяла ваш стиль.

— Старый поезд
источник

3

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

a {
   outline: transparent;
}

— chankruze
источник

1

Настройка прозрачности контура по-прежнему вредит доступности вашего сайта. Идея состоит в том, что он обеспечивает визуальный индикатор того, что элемент сфокусирован. Если вы сделаете его невидимым, этот индикатор будет утерян. Более подробная информация здесь: outlinenone.com

— ktbee

1

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

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

— Андрей
источник

0

Его простая попытка под кодом -

a{
outline: medium none !important;
}

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

— Лойола
источник