Bootstrap: Button shadow is hardcoded

[Kopyov]

We have 3 variables for button shadow:

• $btn-box-shadow
• $btn-focus-box-shadow
• $btn-active-box-shadow

2 issues here:

1. If i set $btn-box-shadow value to "none", button mixin generates incorrect box-shadow for :focus/.focus states:

box-shadow: none, 0 0 0 3px rgba(244, 67, 54, 0.5);

Same for $btn-focus-box-shadow variable.

1. Seems like i can't remove 3px shadow in focus/active states as it's hardcoded in button mixin:

box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5);

Please make it optional.

[myorangeca]

We should have a variable for the '3px'

[andresgalante]

Hi @Kopyov, you are right it is hardcoded. Thanks for bringing it up.

For focus state you would always want a visual indication of the focus ring to make your implementations accessible. And since the mixin is using the $border variable then it generates a focus ring that has the same color as the btn.

The active state shadow might look deceiving since it's using both focus and active shadows, but that should be expected behaviour, right? An active btn should be focus.

@myorangeca A variable for the size of the focus ring (the 3px ) might be intresting but I am worried that without context on _variables.scss would be confusing. What do you think?

[myorangeca]

@andresgalante

I am not sure why it would be confusing but maybe I am not seeing the big picture. To my limited knowledge, there should be a variable for all instances whenever it is needed. I personally like the '3px' to be '2px' like on alpha.6, but I don't want to edit the bootstrap core files in-order to do this.

This goes for alert colors as well. I raised an issue earlier but to no avail... https://github.com/twbs/bootstrap/issues/23894

[Kopyov]

Thanks for explaining the logic, @andresgalante
But this looks strange to me - most of the websites don't care much about accessibility, especially applications that are not accessible to the public. This makes sense, but allow us to turn it off by using separate variable for :focus/.focus shadows, currently i can't disable it. Well actually i can by setting 'none' to shadow variable, but i get invalid css output, which basically disables it :)

[andresgalante]

Hi @myorangeca you are right, a btn focus size variable can be a good solution to this issue.

[Glideh]

I'm using beta2 and I'd like to disable the box-shadow for active buttons (not focus).
Since multiple buttons can be active, I find it does not look well in button groups (shadows overlapping)
As we can see in the checkbox/radio button doc by checking multiple boxes

The background color would be sufficient for me.
The question is how to disable this shadow ?
I tried simply with:

$btn-active-box-shadow: none;

But this has no effect

[manavm1990]

$input-focus-width: 0; might help.

[amaduela]

It worked @manavm1990 Thanks

[yogendrakinja]

$input-focus-width: 0;

This is really worked to remove shadow or outline from input element

[arslan-butt]

Class shadow-none

Now bootstrap 4.1 introduced shadow-none class you can use this to remove shadow

[GF-Huang]

I believe a lot of people like me want to remove the ugly shadow outside the button.
I don't know why Bootstrap has kept it up to now.