Bootstrap : change dynamically radio button color - css

Question

I have bootstrap radio buttons :
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input"....
I would like to change the color whenthe form is validated. I tried color, background-color, border, outline...nothing works.
tried to add the bootstrap btn-danger class...nope.. even the word important.
Is there a way to change the color of the button dynamically (meaning by adding a class with jquery addClass) ?

Answer 1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* default state */
.custom-radio .custom-control-label::before {
background-color: blue;
}
/* checked state */
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:checked~.custom-control-label::after {
background-color: red;
/* this background 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 color code */
}
/* 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">Red on click!</label>
</div>
</div>
</div>
</div>

Answer 2

Maybe Bootstrap styles overwrite your styles.
So you can have !important in css Style that element get your styles only.
for exapmle
input
{
backgorund-color : black !important;
}

Answer 3

when your form validation is true, add active class on custom-radio class
$(".custom-radio").addClass("active")
and put this css in your css
.custom-radio.active .custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #df1895; //desired color
background-color: #df1895; //desired color
}

Answer 4

With some help from the others, I found the answer. You just have to add this css rule :
.active:checked~.custom-control-label::after {
background-color:red;
}
after adding "active" class to your input.