button class with :focus does not show outline

Question

I want to show that buttons have focus, especially when accessed by keyboard. I can tab to the buttons and Developer Tools shows that the button has focus. But, no outline appears. Hovering over the buttons does show the outline except when it has focus.

.remove_input_button:focus {
  outline: 2px solid black;
}

.remove_input_button:hover:not(:disabled) {
  outline: 2px solid black;
}


/* Bootstrap CSS */

button:focus:not(:focus-visible) {
  outline: 0;
}

.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

<button class="btn btn-primary remove_input_button" type="button">
        <img src="https://via.placeholder.com/50" alt="delete">
    </button>

I have also tried :focus-visible, without success. Developer Tools does not show any :focus or :hover styles so I cannot determine whether the Bootstrap styles are affecting my application. I expected my CSS to have priority. Any idea what is going on here?

Developer tools does provide the ability to debug `:focus` and `:hover` styles. Here's how it works in Chrome: https://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools — Brett Donald, Apr 21 '22 at 06:17

score 0 · Answer 1 · answered Apr 21 '22 at 12:55

I removed some code. It was probably intended to affect other controls.

.btn:focus {
    outline: 0 !important;
    box-shadow: none;
}

I used this style. The outline is only needed when focus is gained from the keyboard.

.remove_input_button:focus-visible {
    outline: 2px solid black;
}

button class with :focus does not show outline

1 Answers1