I was wondering how can I change Bootstraps radio button background color and fill color?
<div class="form-check">
<input class="form-check-input" type="radio" name="radio" id="radio1" value="option1">
<label class="form-check-label" for="radio1"> radio label
</label>
</div>
How do I change the Radio Button colors (from the default green)? Quform WordPress v2 Documentation FAQ Styling & layout How do I change the Radio Button colors (from the default green)? Go to Edit Form → Settings → Style → Global, and at the Theme colors options you can choose the theme colors.
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check .
Use the custom-radio
class like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
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:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* This is the default state */
.custom-radio .custom-control-label::before {
background-color: darkorange; /* orange */
}
/* This is the checked state */
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:checked~.custom-control-label::after {
background-color: greenyellow; /* green */
/* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E);
border-radius: 50%;
}
/* active state i.e. displayed while the mouse is being pressed down */
.custom-radio .custom-control-input:active ~ .custom-control-label::before {
color: #fff;
background-color: #ff0000; /* red */
}
/* the shadow; displayed while the element is in focus */
.custom-radio .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 123, 255, 0.25); /* pink, 25% opacity */
}
</style>
<div class="container">
<div class="row mt-3">
<div class="col">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With