phpjsJqueryhtmlcssblog

Как убрать обводку при клике на 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;

}

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =

---