title: How to vertically top-align the text in a INPUT text element?
body: <p>I have a tall INPUT (type=text) element which is sized at 100%. The containing element has a specific height (which is dynamic).</p>
  
  <p>What I want is to be able to put the text at the top of the INPUT element. I've seen a <a href="https://stackoverflow.com/questions/326650/vertically-align-text-within-input-field-of-fixed-height-without-display-table/945812#945812%20few">few</a> <a href="https://stackoverflow.com/questions/12355557/how-to-vertically-align-text-in-input-type-text%20answers">answers</a> use padding to vertically centre it, but I could not get that to place the text at the top of the element. I'm not able to set the height of the element.</p>
  
  <p>Example HTML (or <a href="http://jsfiddle.net/yf5f82vx/" rel="nofollow noreferrer" title="JSFiddle">JSFiddle</a>):</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="outer"&gt;
  &lt;input type="text" value ="textcontent"&gt;&lt;/input&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>body { background-color:gray;}
  
  .outer {
      height:480px;
      background-color:pink;
      margin-top:100px;
  }
  
  input {
      height:100%;
      background-color:lightgray;
      padding-top:0px;
      line-height:100px;
  }
  </code></pre>
  
  <p>Can this be done without setting the height of the element? Browsers I need to support: Chrome, FF, IE9 &amp; IE11.</p>
  
  <p>Thanks
  Dave</p>