Remove text indentation from select (Windows)

Question

I need a cross-browser solution to remove padding/text indentation of native select fields. Using padding: 0 doesn't seem to remove it entirely.

Here's a screenshot of Chrome, with no text space on the left side:

And here's a screenshot of Firefox, which has some text space on the left side:

However, it should also remove the padding in e.g. Edge/IE11/Safari, etc. So it shouldn't be a Firefox only solution, rather a cross-browser solution.

Here's the code:

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;
}

<select>
  <option value="test1">Test 1</option>
  <option value="test2">Test 2</option>
  <option value="test3">Test 3</option>
</select>

Fiddle: https://jsfiddle.net/cbkopypv/1/

Answer 1

This isn't the cleanest solution, but it works:

In addition to reseting the padding to 0, you can use the text-indent property and set different values for different browsers.

Looks like Safari and Chrome are good but Firefox and Edge are off by 2px, so you can shift them to the left by 2px in FF and IE only like so:

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

// Edge
@supports (-ms-ime-align: auto) {
  select {
    text-indent: -2px
  }
}

Those covers the major browser, check out browserhacks.com if you think you'll need to target other browsers, devices, etc..

Hope that helps.

---

according to browserhacks.com looks like another way of targeting IE/Edge ≥ 10 is _:-ms-input-placeholder, :root .selector

so you could add:

_:-ms-input-placeholder, :root select {
    text-indent:-2px
}

That seems to be working for me, Hope that works now for you too.

fiddle

fiddle with new IE updates