css :focus-visible for custom control

Question

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

Can you share some codes you tried so far? – Sato Takeru Oct 08 '21 at 17:12 — Sato Takeru, Oct 08 '21 at 17:12
i've updated the post, see my sandbox – Heyyy Marco Oct 08 '21 at 18:43 — Heyyy Marco, Oct 08 '21 at 18:43

score 1 · Answer 1 · answered Oct 08 '21 at 17:19

1

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>

answered Oct 08 '21 at 17:19

Mohamed Abdallah

796
6
20

i've updated the post, see my sandbox – Heyyy Marco Oct 08 '21 at 18:43

css :focus-visible for custom control

1 Answers1