How do I customize bootstrap‘s $form-validation-state?

I ve been trying to solve this for hours and I cant find the solution. All I want is to add the property ‚background-color: black‘ to the invalid state. Here is the doc. Scroll down to sass. https://getbootstrap.com/docs/5.3/forms/validation/#browser-defaults, This is the appraoch if you want to change the $theme-color or $spacer, but it doesnt work on $custom-validation-states and the doc doesn't say exactly how to do it.
css
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

$custom-validation-states: (
"invalid": (
"background-color": black,
),
);

$form-validation-states: map-merge(
$form-validation-states,
$custom-validation-states
);

@import "~bootstrap/scss/bootstrap";
css
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

$custom-validation-states: (
"invalid": (
"background-color": black,
),
);

$form-validation-states: map-merge(
$form-validation-states,
$custom-validation-states
);

@import "~bootstrap/scss/bootstrap";
Validation
Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
11 Replies
Jochem
Jochem16mo ago
if at all possible, post your code in a codeblock (there's instructions in #How To Ask Good Questions )
共産主義のト二イ
It's sass code.
Jochem
Jochem16mo ago
use ```css, it's close enough or unformatted ```
Kevin Powell
Kevin Powell16mo ago
( sidenote: `​``scss works too) It looks like the issue isn't how you're adding it to the map, but that you are adding something that the mixin they are using isn't expecting. In your invalid state, you can see your black got added in to the map (2nd screenshot), but Sass doesn't know what to do with that.
共産主義のト二イ
any idea, how I can add new property? the Doc just says "Override or extend this to generate different or additional states."
Kevin Powell
Kevin Powell16mo ago
There is the $tooltip-bg-color in there tho what are you trying to add the color to?
共産主義のト二イ
I want to change the input field to red when its invalid
共産主義のト二イ
But I want only use bootstrap. I can override the values inside the $form-validation-states, but adding new properties doesnt work
Kevin Powell
Kevin Powell16mo ago
you can't modify their mixin, afaik. It's more about modifying the existing maps to go to different values. Addtional customization is a bit out of scope for what Bootstrap does... I'd just add a .form-control:invalid { background-color: xyz; } 🤷 Granted I haven't used Bootstrap in years, but I still use Sass a lot and I can't think of a way to modify a mixin
共産主義のト二イ
yeah looks like it. I just don't like the idea of mixing bootstrap with custom css. Thank you Kevin for taking your time. I will watch all your youtube ads 😄
Want results from more Discord servers?
Add your server