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

Псевдокласс :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.08.2018
Редакторы: Влад Мержевич