'How to get rid of React-Bootstrap Dropdown Button box-shadow?

I am trying to get rid of the box shadow or second border on the bootstrap dropdown button when I click on it.

I couldn't find which class makes this change.

Screenshot of bootstrap dropdown button

bootstrap-4react-bootstrapbootstrap-5


Solution 1:[1]

Buttons get appropriate ":focus" classes on focus, which add box shadows:

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

To deactivate this behaviour, set "box-shadow" css property to "none". There is a utility bootstrap class called "shadow-none" which does the same: https://getbootstrap.com/docs/5.1/utilities/shadows/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Igor Gonak

Related Questions