我为我的网页设置了焦点状态。 但即使在我完成点击按钮/链接之后，焦点仍然存在，除非我点击空格。 我该怎么做？

Question

I've styled the focus state for my webpage to my liking. But now it stays on the buttons/links even when I'm done clicking them. I have to click the blank spaces to make it go away. I only want the focus state to be visible when we use TAB key for shifting focus, and(optional) when the buttons are clicked. How can I do that? Do I need to write some JavaScript for that? Basically I want the focus state to behave in a default way, the way it did before I styled it.

*:focus {
  outline: none;
  box-shadow: 0 0 0 0.5rem rgba(61, 112, 46, 0.5);
}

.cta *:focus {
  box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.5);
}

Answer 1

try using this css selector instead of *:focus

*:focus-visible{
    outline: none;
    box-shadow: 0 0 0 0.5rem rgba(61, 112, 46, 0.5);

}