Use checkbox to control css style - HTML CSS CSS Form

HTML CSS examples for CSS Form:input checkbox

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input checkbox

Description

Use checkbox to control css style

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.more {<!--   w  w w . j  a v  a 2s. c om-->
   height:0px;
   -webkit-transition:height 0.4s ease-in-out;
   overflow:hidden;
}

#control:checked~.more {
   height:21px;
}

#control {
   display:none;
}

#toggle {
   color:Chartreuse;
   text-decoration:underline;
   cursor:pointer;
}
</style> 
 </head> 
 <body> 
  <input id="control" type="checkbox"> 
  <label for="control"> <span id="toggle">Lorem </span> </label> 
  <div class="more">
    Lorem ipsum d 
  </div>  
 </body>
</html>

Related Tutorials