Как убрать обводку при клике на input

Убираем обводку при клике на input - разберем несколько вариантов удаления обводки с примерами!

Подробно об удалении обводки при колике

1. Рабочие варианты для удаления обводки при клике.
2. Убираем обводку элементов по клику

Рабочие варианты для удаления обводки при клике.

Чтобы начать разбираться в удалении обводки, нам нужен пример, где обводка не удалена, поэтому нам понадобится

input с типом type text

<input name="text" type="text">

Выведем прямо здесь:

Как видим при клике, наша обводка дала о себе знать.

Далее удалим обводку при клике:

Удаляем обводку с помощью "outline:none;"

Как вы знаете css "3 способа css" - будем использовать способ attribute style внутри тега:

<input name="text" type="text" style="outline:none;">

Посмотрим результат использования "outline:none;"

Проверьте - исчезла ли обводка при клике...

Еще вариант... убираем обводку инпута

Как вариант можно использовать вот такую конструкцию:

Css :

<style>

.example:active, .example:hover, .example:focus {

outline: 0;

outline-offset: 0;

}

</style>

Html:
<input name="text" type="text" class="example">

Нажмите по инпуту - проверьте, пропала ли обводка при клике...




Убираем обводку элементов по клику

Несколько вариантов найденных в сети...

Ещё :

Как убрать браузерную обводку у button, input, textarea, checkbox и прочих элементов верстки появляющуюся в состоянии :focus в различных браузерах: mozilla, google chrome.

:focus {outline: none !important;}

::-moz-focus-outer, ::-moz-focus-inner {

border: 0px !important;

padding: 0;

}




a:focus,

a:active,

button:focus {

outline: 0!important;

outline-color: transparent!important;

outline-width: 0!important;

outline-style: none!important;

box-shadow: 0 0 0 0 rgba(0,123,255,0)!important;

}




input, textarea,input:active, textarea:active {outline:none;}




input[type="checkbox"]:focus,

input[type="radio"]:focus {

visibility: hidden;

}