CSS: Remove Padding Within Select Element

Remove the Padding from an HTML Select Menu

The space you referring inside your image is not padding it's the space occupied by the optgroup tag inside your Select tag. And it cannot be removed due to browser-limitations of SELECT tag along with your HTML approach. The indentation on left is to represent grouping structure.

If you don't want that space, then don't use the optgroup tag and instead go directly for option as shown in below Fiddle.
Check Demo 1

Or if you still want to keep that optgroup tag, you can do a CSS hack, to remove the vertical-space but it won't help you in removing the left side space.
Check 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>

remove space in select box

It has something todo with the browser rendering itself. See this answer on same question for more informations: Text Padding in Select Boxes

In summary, you should not do this or not common.

Remove text indentation from select (Windows)

This is a combination of some answers, comments and my own IE11 hack. I've tested it in IE11, Edge, Chrome, Firefox (Windows) and Safari 10 (macOS) and it works:

.select-container {  overflow: hidden;}
select {  font-size: 18px;  height: 38px;  line-height: 38px;  padding: 0;  width: 100%;  background-color: red;  color: #000000;  display: block;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  outline: 0;  border-color: #000000;  border-width: 0 0 1px 0;  border-style: solid;}
option {  padding: 0;}

/* Firefox: */
@-moz-document url-prefix() {  select {    text-indent: -2px;  }}

/* Edge: */
@supports (-ms-ime-align: auto) {  select {    width: calc(100% + 4px);    margin-left: -4px;  }}

/* IE11: */
@media screen and (-ms-high-contrast: active),screen and (-ms-high-contrast: none) {  select {    width: calc(100% + 4px);    margin-left: -3px;  }}

<div class="select-container">  <select>    <option value="test1">Test 1</option>    <option value="test2">Test 2</option>    <option value="test3">Test 3</option>  </select></div>

---

Related Topics