How do I remove the outline for active state on a button in React Bootstrap?

user_4083744 0
Viewed 3381

I am trying to remove the button outline when a button is clicked in React Bootstrap. I managed to remove the outline by using:

.btn:focus, .btn:active {
  box-shadow: none;
}

however this didn't fix the active state, if the button is held down the outline is still visible. I also tried this fix:

.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    box-shadow: none;
    outline: none;
}

The result is the same, the border still appears when the button is held down. Is there anything I can do to remove this?

react-bootstrap twitter-bootstrap reactjs css
2 Answers

I recommend not doing this. CSS outlines on hover and focus tend to help with accessibility. See the following post: Quick tip: Never remove CSS outlines .

Removing outlines in CSS creates issues for people navigating the web with a keyboard. Using the CSS rule :focus { outline: none; } to remove an outline on an object causes the link or control to be focusable, but removes any visible indication of focus for keyboard users. Methods to remove it such as onfocus="blur()" result in keyboard users being unable to interact with the link or control.

The article provides a few options for handling this issue in a more accessibility-friendly way:

  1. Style the outline
  2. Style the element itself
  3. Move outlines for mouse users only, if you truly must do so
user_65257240

The question is how to do accomplish. Attempting to answer the question ... I did so within the component itself. I wanted the same thing for a button group that mashed the buttons altogether, which I did not like. Adding a style = { boxShadow: 'none' } in the component itself, did the trick for me.

Also, I wanted my grouped button separated (mr-1) and with rounded corners (borderRadius).

<ButtonGroup>
    {stuffBtnList.map((value, index) => (
        <Button
            key={index}
            variant='primary'
            size='sm'
            className='mr-1'
            style = {{ borderRadius: '.2rem', boxShadow: 'none' }}
            onClick={() => setStuff(value)}
        >
            {value}
        </Button>
    ))}
    <DropdownButton
        title='Other'
        size='sm'
        variant='success'
        onSelect={(e) => setStuff(e)}
    >
        other.map((value, index) => (
            <Dropdown.Item key={index} eventKey={value}>
                {value}
            </Dropdown.Item>
        ))}
    </DropdownButton>
</ButtonGroup>
user_4804540
Related