Avoid :focus styles when clicking on div (only on tab key)

Question

In my following minimal example I have a div that acts as a button. It has a tabindex, so if I use the tab key and get to the element, the style of the class .with-focus is applied. So far so good.

But I get the style of the class .with-focus as well when clicking with the mouse on the button. And this is what I do NOT want. Is it possible to avoid?

.with-focus[tabindex]:focus {
 outline: 5px solid green;
}

.btn {
  background-color: #eee;
  border: 1px solid #ddd;
  cursor: pointer;
  height: 50px;
  text-align: center;
  width: 200px;
}

<div class="btn with-focus" tabindex="0" onclick="console.log('clicked')">
  Button
</div>

That's a good link. But it does seem like a lot of overly complicated css for something jq can do with the `.blur()` method. Like a one liner `$('.with-focus').mouseup(function() { this.blur() })` — Iskandar Reza, Jul 01 '19 at 15:34

Agustin Cornu · Answer 1 · 2019-07-01T16:06:46.870

0

I think you can use the :active substate, try adding this after the :focus selector

.with-focus[tabindex]:active {
  outline: 0;
}

Codepen

edited Jul 01 '19 at 16:06

answered Jul 01 '19 at 15:29

Agustin Cornu

186
5

No, unfortunately this does not work in Firefox. – Markus Jul 01 '19 at 15:33
What does not work on firefox? the :active selector does https://caniuse.com/#search=%3Aactive – Agustin Cornu Jul 01 '19 at 16:18
Because in Firefox when clicking with the mouse on the button it gets the style of the class .with-focus – Markus Jul 02 '19 at 13:37

Avoid :focus styles when clicking on div (only on tab key)

1 Answers1