css :focus-visible for custom control

user_1116368 0
Viewed 286

a :focus-visible is always shown for input & textarea, and always shown for button only if the focus switched using tab key.

The question is: how about a custom control made of <div tabIndex="0">....</div>.
Sometimes a complex custom control is easier made from <div> & <span> and styled like a native control.
How to make button like <div> working with :focus-visible?
How to make textarea like <div> working with :focus-visible?
How to tell to css that the specified <div class="my-custom-ctrl"> is a button or text editor?

See my sandbox here

onfocus css html
1 Answers

Use tabindex and it will work.

.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>

user_113544070
Related