Disabled buttons get colored on colorful background

rr-it commented 2 weeks ago

Prerequisites

[X] I have searched for duplicate or closed issues
[X] I have validated any HTML to avoid common problems
[X] I have read the contributing guidelines

Describe the issue

Bootstrap assumes buttons are only used on white/black/gray background.

The disabled-state of buttons is implemented using opacity: 0.65. Thereby disabled buttons are colored on colorful background. E.g. a disabled red button on blue background becomes purple.

https://github.com/twbs/bootstrap/blob/d2d4581790da2618d3fe063dafaa6205c73aabdd/scss/_buttons.scss#L112-L122

Reduced test cases

https://codepen.io/rr-it/pen/LYoOKrx

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.3.3

rr-it commented 2 weeks ago

Nirmit4604 commented 2 weeks ago

Remove the opacity property for disabled buttons: This will ensure the button's background color remains consistent. Adjust the color and background color directly: Set the color and background color explicitly for disabled buttons.

// _buttons.scss

.btn {
  // Your existing button styles here...

  &:disabled,
  &.disabled,
  fieldset:disabled & {
    color: var(--#{$prefix}btn-disabled-color); // Define this variable or use a specific color
    pointer-events: none;
    background-color: var(--#{$prefix}btn-disabled-bg); // Define this variable or use a specific color
    background-image: if($enable-gradients, none, null);
    border-color: var(--#{$prefix}btn-disabled-border-color); // Define this variable or use a specific color
    // Remove the opacity property
    // opacity: var(--#{$prefix}btn-disabled-opacity); 
    @include box-shadow(none);
  }
}

// Define the variables if not already defined
$btn-disabled-color: #6c757d; // Example color, adjust as needed
$btn-disabled-bg: #e9ecef; // Example color, adjust as needed
$btn-disabled-border-color: #dee2e6; // Example color, adjust as needed

You can see the result by applying the changes in a live example. Copy the modified SCSS into the CSS section of the CodePen to see the effect on disabled buttons.

Custom SCSS File:

// _custom-buttons.scss

@import "path-to-bootstrap/scss/bootstrap"; // Import Bootstrap SCSS

.btn {
  // Existing button styles here...

  &:disabled,
  &.disabled,
  fieldset:disabled & {
    color: #6c757d; 
    pointer-events: none;
    background-color: #e9ecef; 
    background-image: if($enable-gradients, none, null);
    border-color: #dee2e6; 
    @include box-shadow(none);
  }
}

Edited by maintainer to apply Markdown code rendering and syntax highlightling

rr-it commented 2 weeks ago

@Nirmit4604 Thank you for looking into this. Unfortunately I can't get your proposed code running. And the proposed code does not look like it would work as a general solution. Please also have a look at https://github.com/twbs/bootstrap/pull/40559

twbs / bootstrap