Псевдоклас :focus застосовується безпосередньо до елемента, який отримує фокус, тому через :focus не можна змінити стиль рядки або блок з текстовим полем. Для цієї мети використовується псевдоклас :focus-within — він додається до батьківського елементу та змінює його стиль, коли всередині нього будь-який елемент отримує фокус.
:focus-within зручно використовувати для підсвічування рядків, коли поле в рядку отримує фокус (рис. 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>.
<code data-language="html"><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>