Категория > Формы > Убрать свечение вокруг текстового поля в Safari - «Формы»

Убрать свечение вокруг текстового поля в Safari - «Формы»

27-03-2016, 14:26. Автор: Administrator

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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».

Перейти обратно к новости