html - 如何获得填充或边距样式以在不同浏览器中选择选项

Question

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

我试过这个:

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

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