How to change radio button background color while checked

Question

I have simple slideshow with 3 images, I need to make background color of the checked button(obviously, each button refers to one img). I tried literally all possible solutions in the google, I would be really thankful if anyone could help me. Thanks in advance!

Here is my slideshow code:

.slider {
            transform: translateX(20%);
            display: inline-block;
            position: relative;
            width: 61%;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px 0px; 
        }
        
        .images {
            display: flex;
            width: 100%;
        }
        
        .images img {
            width: 100%;
            transition: all 0.15s ease;  
        }
        
        .images input {
            display: none; 
        }
        
        .dots {
            display: flex;
            justify-content: center;
            margin: 5px; 
        }
        
        .dots label {
            height: 15px;
            width: 15px;
            border-radius: 50%;
            border: solid #13447E 3px;
            cursor: pointer;
            transition: all 0.15s ease;
            margin: 5px;
        } 
       
        #img1:checked ~ .m1 {
            margin-left: 0;   
        }
         
        #img2:checked ~ .m2 {
            margin-left: -100%;
        }
        
        #img3:checked ~ .m3 {
            margin-left: -200%;
        }

<div class="slider">
  <div class="images">
      <input type="radio" name="slide" id="img1" checked>
      <input type="radio" name="slide" id="img2">
      <input type="radio" name="slide" id="img3">


      <img src="img/img1.jpeg" class="m1" alt="img1">
      <img src="img/img2.jpeg" class="m2" alt="img2">
      <img src="img/img3.jpeg" class="m3" alt="img3">

  </div>
  <div class="dots">
      <label for="img1"></label>
      <label for="img2"></label>
      <label for="img3"></label>

  </div>
</div>

Are you okay with JavaScript? – TechySharnav May 30 '22 at 08:32 — TechySharnav, May 30 '22 at 08:32

score 1 · Accepted Answer · answered May 30 '22 at 08:26

Try to set radio button before label

.slider {
        transform: translateX(20%);
        display: inline-block;
        position: relative;
        width: 61%;
        overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px 0px; 
    }
    
    .images {
        display: flex;
        width: 100%;
    }
    
    .images img {
        width: 100%;
        transition: all 0.15s ease;  
    }
    
    .images input {
        display: none; 
    }
    
    .dots {
        display: flex;
        justify-content: center;
        margin: 5px; 
    }
    
    .dots label {
        height: 15px;
        width: 15px;
        border-radius: 50%;
        border: solid #13447E 3px;
        cursor: pointer;
        transition: all 0.15s ease;
        margin: 5px;
    } 
   
    #img1:checked ~ .m1 {
        margin-left: 0;   
    }
     
    #img2:checked ~ .m2 {
        margin-left: -100%;
    }
    
    #img3:checked ~ .m3 {
        margin-left: -200%;
    }
    [type="radio"] {
    display: none;
}
    input[type="radio"]:checked+label{border-color:red;}

<div class="slider">
        <div class="images">
            <img src="img/img1.jpeg" class="m1" alt="img1">
            <img src="img/img2.jpeg" class="m2" alt="img2">
            <img src="img/img3.jpeg" class="m3" alt="img3">
             
        </div>
        <div class="dots">
        <input type="radio" name="slide" id="img1" checked>
            <label for="img1"></label>
             <input type="radio" name="slide" id="img2">
            <label for="img2"> </label>
             <input type="radio" name="slide" id="img3">
            <label for="img3"></label>
             
        </div>
      </div>

whoknowswho · Answer 2 · 2022-05-30T08:48:22.900

Here's a solution with a bit of javascript :)

.slider {
    transform: translateX(20%);
    display: inline-block;
    position: relative;
    width: 61%;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px 0px; 
}

.images {
    display: flex;
    width: 100%;
}

.images img {
    width: 100%;
    transition: all 0.15s ease;  
}

.images input {
    display: none; 
}

.dots {
    display: flex;
    justify-content: center;
    margin: 5px; 
}

.dots label {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: solid #13447E 3px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 5px;
} 

#img1:checked ~ .m1 {
    margin-left: 0;   
}
 
#img2:checked ~ .m2 {
    margin-left: -100%;
}

#img3:checked ~ .m3 {
    margin-left: -200%;
}


.active {
    background-color: rgb(153, 153, 255);
}

<div class="slider">
        <div class="images">
            <input type="radio" name="slide" id="img1" checked>
            <input class="" type="radio" name="slide" id="img2">
            <input class="" type="radio" name="slide" id="img3">
           

            <img src="img/img1.jpeg" class="m1" alt="img1">
            <img src="img/img2.jpeg" class="m2" alt="img2">
            <img src="img/img3.jpeg" class="m3" alt="img3">
             
        </div>
        <div class="dots">
            <label id="dot1" class="active" onclick="activate('dot1')" for="img1"></label>
            <label id="dot2" class="" onclick="activate('dot2')" for="img2"></label>
            <label id="dot3" class="" onclick="activate('dot3')" for="img3"></label>
             
        </div>
      </div>  

      <script>
          var lastActiveDot = document.getElementById("dot1");
            function activate(id){
                var newActiveDot = document.getElementById(id);
                newActiveDot.classList.add("active");
                lastActiveDot.classList.remove("active")

                lastActiveDot = newActiveDot;
            }
      </script>

How to change radio button background color while checked

2 Answers2