css checkbox not applying changes when in the :checked state

Question

I am trying to bring some hidden text into view when a radio checkbox is checked. I cant quite work out why the :checked styling is not applying once the label is checked. I think i am being really daft but just cant work out what is going on.

Could anyone lend some advice?

 .wrap__wrapper { width: 400px; margin: 0 auto; } .wrap { position: relative; overflow: hidden; } .wrap__radio--input { display: none; } .wrap__inner { width: 300%; left: 0; transition: all 1s; } .wrap__slides { float: left; width: 33.333%; } .wrap__text { font-size: 16px; text-align: center; } .wrap__button { font-size: 1.8rem; cursor: pointer; text-align: center; display: block; } .wrap__radio--input:checked~.wrap__inner { transition: all 1s; background: red; left: -100%; } 

 <div class="wrap__wrapper"> <div class="wrap"> <input type="radio" class="wrap__radio--input" id="slide--1"> <label for="slide--1" class="wrap__button">next slide</label> <div class="wrap__inner"> <div class="wrap__slides"> <p class="wrap__text">slide1</p> </div> <div class="wrap__slides"> <p class="wrap__text">slide2</p> </div> </div> </div> </div> 

Answer 1

Your element need to be positionned so you have to set position property to relative , absolute or fixed on .wrap__inner to be able to use left property. You cannot update position of static element.

 .wrap__wrapper { width: 400px; margin: 0 auto; } .wrap { position: relative; overflow: hidden; } .wrap__radio--input { display: none; } .wrap__inner { position:relative; width: 300%; left: 0; transition: all 1s; } .wrap__slides { float: left; width: 33.333%; } .wrap__text { font-size: 16px; text-align: center; } .wrap__button { font-size: 1.8rem; cursor: pointer; text-align: center; display: block; } .wrap__radio--input:checked~.wrap__inner { transition: all 1s; background: red; left: -100%; } 

 <div class="wrap__wrapper"> <div class="wrap"> <input type="radio" class="wrap__radio--input" id="slide--1"> <label for="slide--1" class="wrap__button">next slide</label> <div class="wrap__inner"> <div class="wrap__slides"> <p class="wrap__text">slide1</p> </div> <div class="wrap__slides"> <p class="wrap__text">slide2</p> </div> <div class="wrap__slides"> <p class="wrap__text">slide3</p> </div> </div> </div> </div> 

Answer 2

You can use the :before or :after pseudo-elements to toggle the previous and next text, apply the position property different from the default value of static to the .wrap__inner div and most importantly change the input type="radio" to input type="checkbox" to be able to toggle the checkbox state:

 .wrap__wrapper { width: 400px; margin: 0 auto; } .wrap { position: relative; overflow: hidden; } .wrap__radio--input { display: none; } .wrap__inner { position: relative; /* any value other than default */ width: 300%; left: 0; transition: all 1s; } .wrap__slides { float: left; width: 33.333%; } .wrap__text { font-size: 16px; text-align: center; } .wrap__button { font-size: 1.8rem; cursor: pointer; text-align: center; display: block; } /* added */ .wrap__button:after { content: "next"; } .wrap__radio--input:checked + .wrap__button:after { content: "previous"; } /***/ .wrap__radio--input:checked ~ .wrap__inner { transition: all 1s; background: red; left: -100%; } 

 <div class="wrap__wrapper"> <div class="wrap"> <input type="checkbox" class="wrap__radio--input" id="slide--1"> <label for="slide--1" class="wrap__button"></label> <div class="wrap__inner"> <div class="wrap__slides"> <p class="wrap__text">slide1</p> </div> <div class="wrap__slides"> <p class="wrap__text">slide2</p> </div> </div> </div> </div> 

Note: Like I wrote in the comment, this only works for two slides.