Change label and image opacity when radio button checked - HTML CSS CSS Form

HTML CSS examples for CSS Form:input radio button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input radio button

Description

Change label and image opacity when radio button checked

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Stack Radio Btn</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.radio-btn input[type="radio"], .radio-image, .radio-heading, .radio-detail {
   opacity: 0.4;
}
.radio-btn input[type="radio"]:checked {
   opacity: 1.0;
}
.radio-btn input[type="radio"]:checked + label .radio-image,
.radio-btn input[type="radio"]:checked + label .radio-heading,
.radio-btn input[type="radio"]:checked + label .radio-detail
{
   opacity:1.0;
}


      </style> 
 </head> <!--from   www  . j a v  a 2 s  . c om-->
 <body> 
  <div class="radio-btn"> 
   <input id="option1" type="radio" name="radio-grp-1"> 
   <label for="option1"> <img src="https://www.java2s.com/style/demo/Opera.png" class="radio-image"> <p class="radio-heading">Radio Heading</p> <p class="radio-detail">Radio Detail</p> </label> 
  </div> 
  <div class="radio-btn"> 
   <input id="option2" type="radio" name="radio-grp-1"> 
   <label for="option2"> <img src="https://www.java2s.com/style/demo/Safari.png" class="radio-image"> <p class="radio-heading">Radio Heading</p> <p class="radio-detail">Radio Detail</p> </label> 
  </div>  
 </body>
</html>

Related Tutorials