How to change radio button background color while checked

May 30, 2022

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>

>Solution :

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>