Убрать обводку в полях ввода и при кликах на ссылках (input, textarea, focus)
Большинство браузеров при помещении курсора в поле ввода или при клике на ссылку-картинку подсвечивает их рамкой.
Сделано это для того, чтобы пользователи могли осуществлять выбор активных элементов сайта (ссылок, полей ввода, пунктов меню) с помощью клавиши [TAB], и видели какой именно элемент находится в данный момент в фокусе. Все бы хорошо, но у разных браузеров разные рамки для подсветки.
Подсветка картинки в Internet Explorer при клике
Рамка вокруг поля ввода в браузерах Chromium
Рамка в IE и Mozilla Firefox
Такие рамки портят целостность дизайна, поэтому я обычно жертвую этой функцией браузеров в угоду общему дизайну. В общем конечно это не совсем верно с точки зрения юзабилити, но если разобраться хорошенько, то не так уж много пользователей используют для навигации по сайтам только клавиатуру, поэтому я считаю, что можно пренебречь этим “удобством”.
outline | CSS
Свойство outline (w3.org) — контур (не путать с контуром букв text-shadow). Очень похож на border.
? положительное число в любых единицах измерениях, но не в процентах
thin
medium
thick
invert
inherit
? положительное или отрицательное число в любых единицах измерениях, но не в процентах
Особенности outline
Ⅰ. outline не увеличивает коробку элемента
. наведите на outline.
Ⅱ. при переносе строк
получается такой вот контур
интереснее всего выглядящий в IE
Ⅲ. если у дочернего блока (потомка) position: static; или z-index ниже либо равен значению родителя, то outline родителя перекрывает его:
Ⅳ. outline ложиться и поверх нижестоящего/вышестоящего в коде элемента. Искл. при работе со свойством position и с overflow родителя.
Примеры
Как убрать обводку/рамку с input, textarea, ссылки a
У некоторых тегов HTML outline присутствует по умолчанию.
Нажмите на эту ссылку и вернитесь обратно. Она в Firefox приобрела такой вид. Очень удобно. Для того, чтобы удалить обводку
Поставьте курсор на поле . В Chrome оно теперь выделено (подсвечено) примерно так . Дабы избавиться от этой рамки
При фокусе на input остальное пространство темнеет, становится менее выражено
CSS полупрозрачная рамка вокруг картинки
Самый простой способ на края изображения наложить полупрозрачный фон 
Как убрать обводку у input в css
Чтобы начать разбираться в удалении обводки, нам нужен пример, где обводка не удалена, поэтому нам понадобится
Выведем прямо здесь:
Как видим при клике, наша обводка дала о себе знать.
Далее удалим обводку при клике:
Удаляем обводку с помощью «outline:none;»
Как вы знаете css «3 способа css» — будем использовать способ attribute style внутри тега:
Посмотрим результат использования «outline:none;»
Проверьте — исчезла ли обводка при клике.
Еще вариант. убираем обводку инпута
Как вариант можно использовать вот такую конструкцию:
.example:active, .example:hover, .example:focus <
Нажмите по инпуту — проверьте, пропала ли обводка при клике.
Убираем обводку элементов по клику
Несколько вариантов найденных в сети. смайлы
Как убрать браузерную обводку у button, input, textarea, checkbox и прочих элементов верстки появляющуюся в состоянии :focus в различных браузерах: mozilla, google chrome.