选项节点上的填充/边距顶部/按钮 - 不同的浏览器渲染

Question

我需要在选项中设置一些额外的空间以方便阅读。

我试过这个：

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

它只适用于firefox。 在chrome / webkit和IE9上，只渲染颜色。

从填充切换到边距，它不会改变任何东西。

有人遇到过这个问题吗？

Answer 1

很难覆盖浏览器定义的表单元素。

如果您想要在每个浏览器上显示相同的下拉列表，请使用某些插件，例如chosen或select2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;