С помощью псевдокласса :focus-within
[w3.org] можно задать стиль
- элементу, получившему фокус (аналог
:focus
), - родителю, дочерний элемент которого получил фокус. Если у предка несколько потомков, то стиль будет применяться при фокусе каждого из них.
<style>
.raz1:focus-within { /* выделить блок при фокусе дочернего input
*/
background: #fff5d7;
}
</style>
<fieldset class="raz1">
<input value="Иван">
</fieldset>
<style> .raz1:focus-within { background: #fff5d7; } </style> <!-- два и более вложенных полей ввода --> <fieldset class="raz1"> <input value="Иван"> <input value="Иванов"> </fieldset>
<style>
.raz1:focus-within {
background: #fff5d7;
}
</style>
<!-- блок fieldset
сам может получить фокус -->
<fieldset tabindex="0" class="raz1">
<input value="Иван">
</fieldset>
<style>
.raz1:focus-within:not(:focus) { /* не выделять блок при фокусе самого блока fieldset
*/
background: #fff5d7;
}
.raz1:focus {
box-shadow: 0 0 2px red;
}
</style>
<fieldset tabindex="0" class="raz1">
<input value="Иван">
</fieldset>
<style>
.raz1:focus-within label { /* выделить потомков блока при фокусе дочернего input
*/
color: red;
}
</style>
<fieldset class="raz1">
<label for="name">Имя</label>
<input value="Иван" id="name">
</fieldset>
Выделить строку при фокусе input
При своём стиле поля ввода, визуально текст из label
поместить в input
.
<style> .raz { display: inline-block; border-bottom: 1px solid gray; } .raz:focus-within { /* поменять цвет линии родителя */ border-bottom-color: blue; } .raz input { all: unset; -moz-appearance: textfield; text-align: right; } .raz input::-webkit-inner-spin-button { /* убрать стрелки изменения числа */ display: none; } </style> <label class="raz"> <input type="number" min="0" value="1000" step="0.01"> ₽ </label>
Перемещение по ссылкам выпадающего меню клавишей Tab
<style> .raz4 li:not(:hover) a:not(:focus) + ul:not(:focus-within) { position: absolute; opacity: 0; pointer-events: none; } </style> <ul class="raz4"> <li> <a href="#home">Главная</a> <li> <a href="#code">Код</a> <ul> <li><a href="#html">HTML</a> <li><a href="#css">CSS</a> <li><a href="#js">JavaScript</a> </ul> </ul>