Placeholder Width

A short snippet/hack where inputs match the width of their placeholders.

by AdamMcKenna

HTML

<div>
   <div class="input-container">
     <div class="input-hidden-label" aria-hidden="true">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </div>
     
     <input class="input" type="text" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/>
   </div>
   
   <br>
   
   <div class="input-container">
     <div class="input-hidden-label" aria-hidden="true">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </div>
     
     <input class="input" type="text" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "/>
   </div>
   
   <br>
   
   <div class="input-container">
     <div class="input-hidden-label" aria-hidden="true">
       Lorem ipsum dolor sit amet.
     </div>
     
     <input class="input" type="text" placeholder="Lorem ipsum dolor sit amet."/>
   </div>
</div>

CSS

.input-container {
  display: inline-block;
  margin-bottom: 2em;
}

.input {
  display: inline;
  width: 100%;
  font-size: 16px;
  font-family: Times;
}

.input-hidden-label {
  height: 0;
  visibility: hidden;
}