Remove the Padding from an HTML Select Menu

How can I remove the top/left padding in a select menu?

I tried setting the padding and margin to 0 but that had no effect. Here is the HTML:

<form class="timePeriodMenu">
    <div class="ui-field-contain">
        <select name="select-native-2" id="select-native-2" multiple>
            <optgroup>
                <option value="1">last 30 days</option>
                <option value="6" selected="selected">past 6 months</option>
                <option value="12">past 12 months</option>
                <option value="300">list all</option>
            </optgroup>
        </select>
    </div>
</form>

jsFiddle: https://jsfiddle.net/wccnuxgt/