Блог

a :focus-visible всегда отображается для input amp; textarea и всегда отображается button только в том случае , если фокус переключается с помощью tab клавиши.

Вопрос в следующем: как насчет пользовательского элемента управления, изготовленного из <div tabIndex="0">....</div> .
Иногда сложный пользовательский элемент управления проще сделать из <div> amp; <span> и стилизовать под собственный элемент управления.
Как заставить button like <div> работать с :focus-visible ?
Как заставить textarea like <div> работать с :focus-visible ?
Как сообщить css, что указанный <div class="my-custom-ctrl"> является кнопкой или текстовым редактором?

Смотрите мою песочницу здесь

Используйте tabindex , и это сработает.

 .focusable:focus-visible {
    color: red;
} 

 <div tabindex="0" class="focusable">
Can be focused
</div>

<div>
Can NOT be focused
</div>

<div tabindex="0" class="focusable">
  Can be focused
</div>

<div>
Can NOT be focused
</div>
<div tabindex="0" class="focusable">
Can be focused
</div>

<div>
Can NOT be focused
</div>

<div tabindex="0" class="focusable">
  Can be focused
</div>