Disabled buttons get colored on colorful background
Open
Nobody has claimed this yet.
css
design
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.6k
- Avg merge
- 7h 19m
- Merged PRs (30d)
- 35
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- 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.
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with scss/_buttons.scss at lines 112–122 and reproduce the behavior using the linked CodePen. Compare disabled buttons on colorful backgrounds in Firefox and determine the expected rendering for the disabled state. Done means the disabled button no longer gains an unintended blended color while its disabled styling remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, scss
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100