0

I have a button with styles that I want to keep when the user hover and focus - however, when the button is clicked, I'd like to remove the greyed out styles (I know these exist because the element has focus) - but worried removing focus styles will impact the UX from an accessibility POV?

.btn {
  width: 100px;
  height: 50px;
  background-color: transparent;
  border-color: black;
}

.btn:focus {
   border: 1px solid #27282a;
   background: #e5e9eb;
   color: #27282a;
}

.btn:hover {
   border: 1px solid #27282a;
   background: #e5e9eb;
   color: #27282a;
}
<button class="btn">Clear</button>

Is there a simple CSS workaround that I'm missing?

cts
  • 586
  • 2
  • 16
  • [:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) is an equivalent to focus that is only applied when navigating via the keyboard, and was added specifically because of the problem you are facing. (Make sure you check the browser support before using, as there are a couple of gaps that may or may not matter to you) – DBS Dec 07 '21 at 17:02

0 Answers0