Как убрать свечение вокруг текстового поля?
В браузерах Safari и Chrome, Mozilla вокруг текстового поля при получении фокуса наблюдается характерное свечение, которое указывает активное поле. Если по дизайну свечение не требуется, его можно убрать, добавив свойство outline со значением none к селектору input:focus. Псевдокласс :focus говорит о том, что стиль применяется к элементу получившим фокус.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текстовое поле</title>
<style>
input[type="text"]:focus { outline: none; }
</style>
</head>
<body>
<form action="#">
<p><input type="text"></p>
</form>
</body>
</html>
Поскольку в других браузерах не возникает свечения вокруг полей формы при получении фокуса, приведенный стиль никак в них себя не проявит.
Выделение активных элементов форм в Safari и Chrome, Mozilla применяется не только к текстовым полям, но и к другим элементам. Чтобы убрать свечение только для определенных элементов, в данном примере используется конструкция input[type="text"], которая говорит: «использовать стиль для тегов input только с атрибутом type равным text».
Возможно, вам будет интересно
Про новые CSS псевдоклассы - :is() :where() :has()
Кроссбраузерная стилизация select на CSS
Масштабирование в CSS средствами zoom и transform
Адаптивная верстка. Правильные медиа выражения для retina.
