Automatically scale input with static placeholder - HTML CSS CSS Form

HTML CSS examples for CSS Form:input

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

Description

Automatically scale input with static placeholder

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">
body {<!--from  ww  w  .ja v a2s.co m-->
   font-family:sans-serif;
}

.staticPlaceholder {
   border:2px solid Chartreuse;
   display:inline-block;
   white-space:nowrap;
   padding:3px;
}

.staticPlaceholder label {
   color:yellow;
}

.staticPlaceholder input {
   border:0;
   outline:0;
   width:201px;
}
</style> 
 </head> 
 <body> 
  <div class="staticPlaceholder"> 
   <label for="alias" style="cursor: text;">Lorem ips</label> 
   <input type="text" name="alias" id="alias" maxlength="15"> 
  </div> 
  <br> 
  <br> 
  <div class="staticPlaceholder"> 
   <label for="alias" style="cursor: text;">Lorem ipsum dolor sit a</label> 
   <input type="text" name="alias" id="alias" maxlength="15"> 
  </div>  
 </body>
</html>

Related Tutorials