<input/> inside <label> - HTML CSS CSS Form

HTML CSS examples for CSS Form:input label

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

Description

<input/> inside <label>

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">
.multi_answer label:hover {
   background:Chartreuse;
}

.multi_answer_box input {
   padding-left:6px;
   padding-right:6px;
   float:left;
   height:49px;
   width:49px;
}

.multi_answer label {
   overflow:auto;
   cursor:pointer;
   width:auto;
   margin:11px;
   padding:11px;
   -moz-border-radius:8px;
   border-radius:8px;
   background:yellow;
   display:block;
}
</style> <!--   w ww  .  j a  v  a 2  s .  c  o m-->
 </head> 
 <body> 
  <li class="multi_answer"> <label for="checkbox2"> 
    <div class="multi_answer_box"> 
     <input type="checkbox" id="checkbox2" name="checkbox2" class="multi_box"> 
    </div> 
    <div class="multi_answer_text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lac 
    </div> </label> </li> 
  <br> 
  <br> 
  <hr> 
  <br> 
  <br> 
  <li class="multi_answer"> 
   <div class="multi_answer_box"> 
    <input type="checkbox" id="checkbox3" name="checkbox3" class="multi_box"> 
    <label for="checkbox3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed</label> 
   </div> </li>  
 </body>
</html>

Related Tutorials