title: How can I control the height of an Option element in Webkit?
body: <p>This seems really simple but I can't even find something telling me that it's not <em>possible</em>, let alone how to do it.</p>
  
  <p>I've got a page that uses expanded/multiple <code>select</code>s, and I can't seem to control the height of the options. They look really snug. In Firefox, CSS values for <code>option</code> in <code>height</code> and <code>line-height</code> both seem to have the desired effect, as does <code>padding</code>, but not in Chrome 8 or Safari 5. Am I missing something? Here's a sample of my code. I've put in anything that could affect the option in case there's some overriding value that I'm missing.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, input, select, checkbox { 
    font-family:'Avenir Lt Std',AppleGothic,'century gothic',Verdana,sans-serif; 
    font-size: 15px; 
    font-weight:200; 
    line-height: 18px; 
  }
  
  input, select { 
    color:#4c2a18; 
    border: 1px solid #cfc8b4; 
    background-color:#ffffff; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
    border-radius: 0;
    margin:0; 
  }
  
  option { 
    height: 35px; 
    padding:5px; 
    line-height: 35px; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select size="5"&gt;
    &lt;option value=""&gt;This is option 1&lt;/option&gt;
    &lt;option value=""&gt;Option 2&lt;/option&gt;
    &lt;option value=""&gt;Just trying to show how the line height thing works.&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can view it in action <a href="http://bensaufley.com/test/select.php" rel="noreferrer">here</a>.</p>