Input elements consuming all space on the line - HTML CSS CSS Form

HTML CSS examples for CSS Form:input

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

Description

Input elements consuming all space on the line

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">
html {<!--from w w  w .j  a  v  a2  s. c o m-->
   box-sizing:border-box;
}

*,*::before,*::after {
   box-sizing:inherit
}

fieldset {
   border:0;
   padding:0;
   margin:0;
   min-width:0
}

input {
   border-style:none
}

.form-group {
   box-sizing:border-box;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   width:13.6rem
}

.input {
   padding:.759rem;
   width:100%;
   margin:.3126rem;
   border:2px dashed Chartreuse;
}

.split-input {
   display:flex;
   flex-flow:row;
   margin:0 .3126rem;
}

.split-input :first-child {
   flex:0 0 36%;
   margin-left:0;
}

.split-input :last-child {
   margin-right:0;
}
</style> 
 </head> 
 <body> 
  <form class="form-group"> 
   <fieldset> 
    <input class="input" type="text" placeholder="First Name"> 
    <input class="input" type="text" placeholder="Last Name"> 
    <input class="input" type="email" placeholder="Email"> 
    <div class="form-group split-input"> 
     <input class="input" type="text" placeholder="043"> 
     <input class="input" type="text" placeholder="First Name"> 
    </div> 
   </fieldset> 
  </form>  
 </body>
</html>

Related Tutorials