CSS фокус-внутри, чтобы показать этикетку

Question

Пример с конца https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_build_custom_form_controls:

.select label {
  display: none;
}

.select:focus-within label {
  display: initial;
}

input:checked + label {
  display: initial;
}

 <fieldset class="select">
  <legend>Pick a fruit</legend>
      <input type="radio" name="fruit" value="Cherry" id="fruitCherry" checked>
   <label for="fruitCherry">Cherry</label>
      <input type="radio" name="fruit" value="Lemon" id="fruitLemon">
   <label for="fruitLemon">Lemon</label>
      <input type="radio" name="fruit" value="Banana" id="fruitBanana">
   <label for="fruitBanana">Banana</label>
  </fieldset>

(я упростил пример, чтобы лучше проиллюстрировать эту мысль). Обратите внимание, как вы можете нажать на одну из меток, и поскольку после этого фокус находится внутри выделения, все метки становятся видимыми. Однако, как только вы попытаетесь нажать на метку другого элемента, метки исчезнут, прежде чем выбрать этот элемент, поскольку до отпускания кнопки мыши остается короткий период, когда ни один элемент не сфокусирован. Я предполагаю, что браузер обрабатывает событие нажатия только после отпускания кнопки мыши.

Есть ли способ сохранить фокус, удерживая нажатой кнопку мыши, даже без JavaScript? Я испытал это на Firefox и Chrome на Linux.

Я также удивлен тем, что он действует по-разному в зависимости от того, нажимаете ли вы и удерживаете ярлык или переключатель.

Answer 1

По умолчанию <label> не является фокусируемым элементом.

Когда вы пытаетесь щелкнуть ярлык, он как будто щелкает, чтобы убрать фокус с того, что вы щелкнули ранее. .

Чтобы сделать элемент фокусируемым, мы используем атрибут tabindex с отрицательным значением, чтобы он не мешал навигации, потому что наша единственная цель - сделать элемент фокусируемым

.select label {
  display: none;
}

.select:focus-within label {
  display: initial;
}

input:checked+label {
  display: initial;
}

<fieldset class="select">
  <legend>Pick a fruit</legend>
  <input type="radio" name="fruit" value="Cherry" id="fruitCherry" checked>
  <label tabindex="-1" for="fruitCherry">Cherry</label>
  <input type="radio" name="fruit" value="Lemon" id="fruitLemon">
  <label tabindex="-1" for="fruitLemon">Lemon</label>
  <input type="radio" name="fruit" value="Banana" id="fruitBanana">
  <label tabindex="-1" for="fruitBanana">Banana</label>
</fieldset>