The space you are referring to inside the image is not just padding; it is actually the space occupied by the optgroup tag within your Select tag. Unfortunately, this space cannot be removed due to browser limitations with the SELECT tag using your current HTML setup. The indentation on the left side is there to represent the grouping structure.
If you do not want that space, one solution would be to avoid using the optgroup tag and instead directly use the option tag as demonstrated in the Fiddle below.
See Demo 1
Alternatively, if you wish to keep the optgroup tag but remove the vertical space, you can implement a CSS hack, although it will not eliminate the space on the left side.
See Demo 2
.demo-2 optgroup {
font-size: 0;
}
.demo-2 option {
font-size: 14px;
}
DEMO 1 - Removing OPTGROUP tag
<form class="timePeriodMenu demo-1">
<div class="ui-field-contain">
<select name="select-native-2" id="select-native-2" multiple>
<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>
</select>
</div>
</form>
<hr> DEMO 2 - Keeping Optgroup, but removing vertical-space with CSS hack.
<form class="timePeriodMenu demo-2">
<div class="ui-field-contain">
<select name="select-native-2" id="select-native-2" multiple>
<optgroup label="German Cars">
<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>