-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Disabled buttons get colored on colorful background #40557
Comments
Related to #38455 |
Remove the opacity property for disabled buttons: This will ensure the button's background color remains consistent. // _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 |
@Nirmit4604 Thank you for looking into this. |
Prerequisites
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.
bootstrap/scss/_buttons.scss
Lines 112 to 122 in d2d4581
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
The text was updated successfully, but these errors were encountered: