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.

Jochem•7/11/23, 9:57 PM

if at all possible, post your code in a codeblock (there's instructions in #How To Ask Good Questions )

JJochem if at all possible, post your code in a codeblock (there's instructions in #How ...

共

共産主義のト二イOP•7/11/23, 10:04 PM

It's sass code.

Jochem•7/11/23, 10:05 PM

use ```css, it's close enough

Jochem•7/11/23, 10:05 PM

or unformatted ```

Kevin Powell•7/11/23, 10:41 PM

( 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.

Kevin Powell•7/11/23, 10:43 PM

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.

KKevin Powell In your invalid state, you can see your black got added in to the map (2nd scree...

共

共産主義のト二イOP•7/11/23, 10:46 PM

any idea, how I can add new property? the Doc just says "Override or extend this to generate different or additional states."

Kevin Powell•7/11/23, 10:46 PM

There is the $tooltip-bg-color in there tho

Kevin Powell•7/11/23, 10:47 PM

what are you trying to add the color to?

KKevin Powell what are you trying to add the color to?

共

共産主義のト二イOP•7/11/23, 10:52 PM

I want to change the input field to red when its invalid

KKevin Powell There is the $tooltip-bg-color in there tho

共

共産主義のト二イOP•7/11/23, 10:53 PM

KKevin Powell what are you trying to add the color to?

共

共産主義のト二イOP•7/11/23, 10:53 PM

But I want only use bootstrap.

KKevin Powell what are you trying to add the color to?

共

共産主義のト二イOP•7/11/23, 10:55 PM

I can override the values inside the $form-validation-states, but adding new properties doesnt work

Kevin Powell•7/11/23, 11:02 PM

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

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

KKevin Powell you can't modify their mixin, afaik. It's more about modifying the existing maps...

共

共産主義のト二イOP•7/11/23, 11:19 PM

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