Set form control to use 100% width minus margin and padding - HTML CSS CSS Form

HTML CSS examples for CSS Form:Width

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

Description

Set form control to use 100% width minus margin and padding

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
html, body {
   width: 100%;
}
* {<!--   ww  w . ja va  2 s . c  om-->
   padding:0;
   margin:0;
}
#login_page {
   top: 0;
   margin-top: 50px;
   margin-left: 0;
   position: static;
}
#login_box {
   overflow:hidden;
   padding:10px;
}
input[type="text"], input[type="password"] {
   width: 100% !important;
   margin: 5px 0 !important;
}
#login_page input[type="submit"] {
   width: 97% !important;
   margin: 5px 0;
}

      </style> 
   </head> 
   <body> 
      <div id="login_box"> 
         <form name="login_page" id="login_page" method="post" action="#"> 
            <input type="text" name="username" placeholder="Username" autofocus required src="#" poster="#"> 
            <br> 
            <input type="password" name="password" placeholder="Password" required src="#" poster="#"> 
            <br> 
            <div id="login_page_checkbox"> 
               <label class="checkbox"> 
                  <input type="checkbox" name="rememberme" value="1" src="#" poster="#">
                   check box 
               </label> 
            </div> 
            <br> 
            <input type="submit" name="login_submit" value="Log In" src="#" poster="#"> 
         </form> 
      </div>  
   </body>
</html>

Related Tutorials