Move input elements down in relation to their labels - HTML CSS CSS Form

HTML CSS examples for CSS Form:input label

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

Description

Move input elements down in relation to their labels

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">
label {<!--from  ww  w . j a  va 2  s .c  o m-->
   white-space:nowrap;
   display:inline-block;
}

label p {
   background:aqua;
   display:inline-block;
   color:Chartreuse;
   padding:2px 11px;
   font-size:17px;
   line-height:25px;
}

input {
   font-family:monospace;
   height:15px;
   box-shadow:0px 0px 8px 0px yellow;
   border:0;
   position:relative;
   top:4px;
}
</style> 
 </head> 
 <body> 
  <label for="inputSize"> <p>Lore</p> <input id="inputSize" class="char2" type="text"> <br> <code>Lorem ipsum dolo</code> </label> 
  <label for="inputWeight"> <p>Lorem </p> <input id="inputWeight" class="char3" type="text"> <br> <code>Lorem ipsum dolor</code> </label> 
  <label for="inputSpacing"> <p>Lorem ipsum do</p> <input id="inputSpacing" class="char2" type="text"> <br> <code>Lorem ipsum dolor </code> </label> 
  <label for="inputWSpacing"> <p>Lorem ipsum </p> <input id="inputWSpacing" class="char2" type="text"> <br> <code>Lorem ipsum dolo</code> </label>  
 </body>
</html>

Related Tutorials