title: How do I increase height of an input field so that placeholder text fully appears in input box HTML5
body: <p>I want to increase height of input box so my placeholder text wraps and is fully viewable to read.  However, my css does not seem to be working!  Any ideas??</p>
  
  <p>Here's the hmtl5 for the screen name </p>
  
  <pre><code>&lt;tr&gt;
      &lt;th class='row_header requiredfield'&gt;Screen Name*&lt;/th&gt;
      &lt;td&gt;&lt;input class="large_width tall_height" id="screen_name" type="text" name="screenname" value="{{screenname}}" placeholder="Put in a name others can understand if you don't want to use your actual name."/&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>.large_width {
      width:250px;
      height: 25px;
  }   
  
  .tall_height {
      height: 50px;
  }
  
  input {
      font-size: 14px;
      font-family: "Helvetica Neue";
  }
  
  input[placeholder] {
      font-size: 11px;
  }
  </code></pre>