Bootstrap4 radio button background and fill color

Question

I was wondering how can I change Bootstraps radio button background color and fill color?

Answer 1

Use the custom-radio class like so:

  
  Toggle this custom radio

That gives you the flexibility to style the radio input in any way you want.

The background color (i.e. what you see in the default, unchecked state) is controlled by this rule:

.custom-control-label::before {
    background-color: darkorange;
}

I changed it from the default grey to orange there.

And here are the css rules to control all states:

    

        

            

                
                Toggle this custom radio