Show focus outline only on tabbing not on mouse click

Question

I am working on ReactJS web app, and I am adding specific outline style, but the outline shows up when a user clicks on it using a mouse. How can I make the outline to appear only for tabbing?

const Test = styled.div`
 &:focus {
  outline: 1px solid red;
 }
`;

Possible duplicate of [Enable :focus only on keyboard use (or tab press)](https://stackoverflow.com/questions/31402576/enable-focus-only-on-keyboard-use-or-tab-press) — joeytwiddle, Apr 02 '18 at 06:17

score 1 · Answer 1 · answered Feb 14 '18 at 22:15

1

There is already an excellent answer to this question: Enable :focus only on keyboard use (or tab press)

Take a look, the answer is very detailed. have fun coding.

answered Feb 14 '18 at 22:15

Sitian Liu

1,156
10
14

score 0 · Answer 2 · answered Oct 23 '22 at 19:25

0

Use focus-active pseudo-class. Check MDN documentation for that.

const Test = styled.div`
 &:focus-visible {        /* <--- HERE IS THE CHANGE */
  outline: 1px solid red;
 }
`;

As Sitian Liu said, check this answer for a deep answer.

answered Oct 23 '22 at 19:25

JuanPasténCastillo

33
1
7

Show focus outline only on tabbing not on mouse click

2 Answers2