Keep a button appended to an input even at a smaller page width - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button

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

Description

Keep a button appended to an input even at a smaller page width

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css"> 
  <style id="compiled-css" type="text/css">

input {<!--from   w  ww.j av  a 2 s  .c om-->
   font-size: 16px;
   padding-right: 50px;
   border-radius: 0px;
   height: 30px;
}
.pure-button {
   margin-left: -45px;
   height: 30px;
   width: 40px;
   padding: 1px;
}
span {
   cursor: pointer;
   display: inline-block;
   height: 11px;
   width: 8px;
   text-align: center;
   white-space: nowrap;
   align-self: flex-start;
   background: red;
   background-position: 0 0;
   margin: 1px;
}
input, button {
   display: inline-block !important;
   margin: 0 !important;
}


      </style> 
 </head> 
 <body> 
  <div class="pure-g"> 
   <div class="pure-u-1"> 
    <form class="pure-form"> 
     <fieldset> 
      <input type="text" class="pure-input-1-2"> 
      <button type="submit" class="pure-button pure-button-primary"> <span></span> </button> 
     </fieldset> 
    </form> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials