title: Remove the Padding from an HTML Select Menu
body: <p>How can I remove the top/left padding in a select menu?</p>
  
  <p><a href="https://i.stack.imgur.com/N1mS2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N1mS2.png" alt="enter image description here"></a></p>
  
  <p>I tried setting the padding and margin to 0 but that had no effect. Here is the HTML:</p>
  
  <pre><code>&lt;form class="timePeriodMenu"&gt;
      &lt;div class="ui-field-contain"&gt;
          &lt;select name="select-native-2" id="select-native-2" multiple&gt;
              &lt;optgroup&gt;
                  &lt;option value="1"&gt;last 30 days&lt;/option&gt;
                  &lt;option value="6" selected="selected"&gt;past 6 months&lt;/option&gt;
                  &lt;option value="12"&gt;past 12 months&lt;/option&gt;
                  &lt;option value="300"&gt;list all&lt;/option&gt;
              &lt;/optgroup&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>jsFiddle: <a href="https://jsfiddle.net/wccnuxgt/" rel="nofollow noreferrer">https://jsfiddle.net/wccnuxgt/</a></p>
  
  <p></p>