КодSEOБлогИное

Псевдокласс :focus-within

С помощью псевдокласса :focus-within [w3.org] можно задать стиль 

<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>
◄▲►
Все комментарии