Border color & inputs work differently with CSS vars
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
Using border color utility classes with inputs works differently since the adding of CSS vars for border colors (see https://github.com/twbs/bootstrap/commit/de0dfca9a1749990319cdfcbb7f1584df09d7091).
This issue was Initially spotted by @louismaximepiton.
Before
- Go to https://getbootstrap.com/docs/5.1/forms/form-control/
- Add
.border-danger
to the first input in the page - Result: the border is now red
Now (main branch)
- Go to https://twbs-bootstrap.netlify.app/docs/5.1/forms/form-control/
- Add
.border-danger
to the first input in the page - Result: the border stays gray
because .border-danger
value is --bs-border-color: rgba(--var(--bs-danger-rgb), var(--bs-border-opacity));
and .form-control border: 1px solid #ced4da;
. .form-control border
doesn't use the CSS var so doesn't change the color.
- Add
.border
as well - Result: the border is now red
because by adding .border
the border will use the color defined in the CSS var and will override the border color specific to the form control.
Is it expected?
I'm not sure this is an issue to fix or if it is expected. But if it is expected, we should maybe mention it in the Migration page because some projects could observe a regression since adding a .border
was not mandatory before.
What operating system(s) are you seeing the problem on?
Windows, macOS
What browser(s) are you seeing the problem on?
Firefox
What version of Bootstrap are you using?
v5.2.0 (current main branch)