按钮 - 不同的浏览器呈现

【问题标题】：padding/margin top/botton on option node - different browser rendering选项节点上的填充/边距顶部/按钮 - 不同的浏览器呈现
【发布时间】：2015-09-15 14:52:33
【问题描述】：

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

我试过这个：

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

它只在 Firefox 上运行良好。在 chrome/webkit 和 IE9 上只呈现颜色。

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

有人遇到过这个问题吗？

【问题讨论】：

标签： html css options

【解决方案1】：

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

如果您想要在每个浏览器上看起来都一样的下拉菜单，请使用一些插件，例如 chosen 或 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>

【讨论】：

我知道，但我需要使用原生组件 :) 谢谢回复
@tarini 所以保持原样。