How to get padding or margin styles to work on select options across different browsers

Question

I need to set some extra space inside option to facilitate reading.

I tried with this:

option {
    padding: 2px 8px;
    &:first-of-type {
        padding-top: 8px;
        color: red;
    }
    &:last-of-type {
        padding-bottom: 8px;
        color: blue;
    }
}

It only works well on Firefox. On chrome/webkit and on IE9 only colors are rendered.

Switching from padding to margin does not change anything.

Has someone faced this issue?

Answer 1

It's hard to overwrite browser defined form elements.

If you want dropdown that looks same on every browser use some plugin like chosen or select2

$(document).ready(function() {
  $('select').select2({
    width: '200px'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>