CODEWITHSUNDEEP
cssbootstrap-4
mlwacosmos
mlwacosmos

Reputation: 4561

Bootstrap : change dynamically radio button color

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.

enter image description here

Is there a way to change the color of the button dynamically (meaning by adding a class with jquery addClass) ?

Upvotes: 1

Views: 2588

Answers (4)

mlwacosmos
mlwacosmos

Reputation: 4561

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.

Upvotes: 0

azermann
azermann

Reputation: 91

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

Upvotes: 1

Junaid Shaikh
Junaid Shaikh

Reputation: 1143

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
}

Upvotes: 0

Mohammad Asgharian
Mohammad Asgharian

Reputation: 11

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;
}

Upvotes: 0

Related Questions