Фокус у родителя

Псевдокласс :focus применяется непосредственно к элементу, который получает фокус, следовательно, через :focus нельзя изменить стиль строки или блока с текстовым полем. Для этой цели используется псевдокласс :focus-within — он добавляется к родительскому элементу и меняет его стиль, когда внутри него какой-либо элемент получает фокус.

:focus-within удобно использовать для подсветки строк, когда поле в строке получает фокус (рис. 1).

Подсветка строк в форме

Рис. 1. Подсветка строк в форме

Каждую строку создаём с помощью элемента <div> с классом row, а внутри вставляем <label> для названия и <input> для самого поля. Псевдокласс :focus-within добавляем к классу row и меняем цвет фона через свойство background (пример 1).

Пример 1. Подсветка строк

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:focus-within</title> <style> form { background: #f5f5f5; /* Цвет фона */ padding: 5px; /* Поля */ } .row { padding: 5px; /* Поля */ } .row label { display: inline-block; /* Строчно-блочный элемент */ width: 80px; /* Ширина */ } .row:focus-within { background: #c5e2bd; /* Цвет фона */ } </style> </head> <body> <form> <div class="row"> <label>Логин:</label><input name="login"> </div> <div class="row"> <label>Пароль:</label><input type="password" name="pass"> </div> </form> </body> </html>

Браузеры Internet Explorer и Edge не поддерживают :focus-within.

Кроме подсветки строк :focus-within можно использовать для стилизации полей формы. На рис. 2 показано поле для поиска с картинкой и скруглёнными уголками. При получении фокуса меняется цвет рамки и фона.

Поле для поиска

Рис. 2. Поле для поиска

Для создания подобного элемента формы используем <div>, внутрь которого вставляем <input> и <img>.

<div class="search">
  <input type="search" autofocus>
  <img src="image/zoom.png" alt="">
</div>

У самого <input> есть исходное оформление в виде рамки и белого фона, и чтобы поле не выделялось и выглядело частью блока, для <input> надо задать прозрачный фон, а также убрать border и outline. Псевдокласс :focus-within используется для изменения стиля <div>, когда <input> получает фокус (пример 2).

Пример 2. Собственный вид поля для поиска

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:focus-within</title> <style> .search { display: flex; /* Верстаем на флексах */ background: #f5f6f8; /* Цвет фона */ border: 1px solid #e9eaec; /* Параметры рамки */ padding: 5px 10px; /* Поля вокруг текста */ border-radius: 20px; /* Скругляем уголки */ } .search input { outline: none; border: none; /* Убираем рамки */ background: transparent; /* Прозрачный фон */ flex-grow: 1; /* Занимает всю доступную ширину */ margin-right: 5px; /* Расстояние до картинки */ } .search img { flex-grow: 0; /* Занимает оставшуюся ширину */ } .search:focus-within { background: #fff; /* Цвет фона */ border-color: #50a2de; /* Цвет рамки */ } </style> </head> <body> <form action="/example/handler.php"> <div class="search"> <input type="search" autofocus> <img src="image/zoom.png" alt=""> </div> </form> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич