radion, checbox secondary Variants

[sysmat]

• is it possible to use different variants for native radio, checkbox?
• I try focus-ring focus-ring-secondary, but when click outline become primary color

[sercanvr]

• is it possible to use different variants for native radio, checkbox?
• I try focus-ring focus-ring-secondary, but when click outline become primary color

Hello sysmat,

That's a good question. You've correctly observed that while you can use focus-ring utilities, they don't always override the native browser's focus outline on default radio and checkbox inputs.

This happens because the native focus style is often managed directly by the browser and isn't fully controllable with Bootstrap's utility classes. These utilities are mainly designed to style the custom form components that Bootstrap provides, not the native ones.

To fix this, you'll need to use some custom CSS to target the :focus pseudo-class of the native elements and override the browser's default style.

You can add this CSS to your project to achieve the secondary color effect:

input[type="radio"]:focus, input[type="checkbox"]:focus { outline: 0; box-shadow: 0 0 0 .25rem rgba(var(--bs-secondary-rgb),.25); }

Hope this helps you with your project!

[sysmat]

@sercanvr thx, it works :)