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

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

В браузерах 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».

Голосов: 1422 | Просмотров: 8634

наверх