Китегории

Как убрать свечение вокруг текстового поля в Safari?

6 мая 2022
Internet Explorer Chrome Opera Safari Firefox Android iOS
  1.0+   1.0+   1.0+ 1.0+

Задача

Убрать рамку вокруг элемента формы при получении им фокуса в браузерах Safari и Chrome.

Решение

В браузерах Safari и Chrome вокруг текстового поля при получении фокуса наблюдается характерное свечение, которое указывает активное поле (рис. 1). Если по дизайну свечение не требуется, его можно убрать, добавив свойство outline со значением none к селектору input:focus. Псевдокласс :focus говорит о том, что стиль применяется к элементу получившим фокус.

Рис. 1. Свечение вокруг текстового поля в Safari

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текстовое поле</title>
  <style>
   input[type="text"]:focus { outline: none; }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p><input type="text"></p>
  </form>
 </body>
</html>

Поскольку в других браузерах не возникает свечения вокруг полей формы при получении фокуса, приведенный стиль никак в них себя не проявит.

Выделение активных элементов форм в Safari и Chrome применяется не только к текстовым полям, но и к другим элементам. Чтобы убрать свечение только для определенных элементов, в данном примере используется конструкция input[type=»text»], которая говорит: «использовать стиль для тегов <input> только с атрибутом type равным text».


Добавить комментарий

Ваш адрес email не будет опубликован.

Статьи