title: HTML5 Select Multiple Height To Fit Content
body: <p>We a trying to get a <code>select</code> input element with <code>multiple</code> attribute set on, to automatically resize to fit its content. </p>
  
  <p>We have noticed that when setting the <code>select</code> element <code>multiple</code> to true, we can then change the styling of the child <code>option</code> elements.</p>
  
  <pre><code>&lt;select multiple&gt;
     &lt;option&gt;A&lt;/option&gt;
     &lt;option&gt;B&lt;/option&gt;
     &lt;option&gt;C&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This is great because we can create a more customized user experience...</p>
  
  <pre><code>select option{
     display : inline-block;
     padding : 5px;
     border-radius : 3px;
  }
  </code></pre>
  
  <p>But the problem is that the size is interpreted by the browser to be "3" and so the height is being set accordingly...</p>
  
  <p>Is there a way to make the select to auto resize to fit the content?</p>
  
  <p>Thanks in advance...</p>