2

I have applied padding on my option's which seems to work fine in chrome and firefox but on IE11... the padding is not visible at all.

I looked up online and tried various things like:

-ms-appearance: none;

but none of it helped with the issue.

HTML:

<div>
  <select class="listBox list-box" size="6" multiple>
    <option>Test 1</option>
  </select>
</div>

CSS:

.listBox {
  height: 250px;
  width: 200px;
}

.list-box option {
  padding-top: 13px;
  padding-bottom: 7px;
  padding-left: 15px;
}

select {
  padding: 10px;
  width: 200px;
}

JSFiddle Demo

user4756836
  • 1,175
  • 4
  • 18
  • 43
  • 2
    This is a known issue. Styling `option` elements is very unreliable. If you need to change their appearance this drastically I would suggest you use a library which converts `select`/`optgroup`/`option` elements to `div` elements which can be styled much more freely. Select2, for example. – Rory McCrossan Nov 17 '16 at 16:11
  • 2
    2016 and we still have to use external plugins to standardize select menu styling across browsers. :{ – Christopher Marshall Nov 17 '16 at 16:12

0 Answers0