remove outline from button when clicked

Question

#hamburger-btn :focus :active{
outline: 0 !important;
border: 0 !important;
}

<button id="test">
  <div id="hamburger-btn">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>

I am trying to remove the blue outline from the hamburger btn when clicked however it is not working. My html is the following:

however it is not working

Quentin · Accepted Answer · 2019-07-25T20:27:46.163

A space is a descendant combinator, you aren't trying targetting the descendants of the button, you are targetting the button itself.

Remove the descendent combinators from your selector.

Also note that to add an OR condition you will need to use a , and repeat every part of selector that is shared between the two parts.

Also note that the focus is applied to the button and not to the div inside the button, so you need to target the correct element in the first place.

Danger: Focus indicators are important accessibility features. Not everybody can or wants to use a mouse. They may need to know where the focus is in a document in order to interact with it. Reconsider removing all signs of the focus.

Do not do this

#test:focus,
#test:active {
  outline: 0;
}

<button id="test">
            <div id="hamburger-btn">
            Needs content to be visible
                <span></span>
                <span></span>
                 <span></span>
                 <span></span>
            </div>
        </button>

remove outline from button when clicked

1 Answers1