增加选择菜单选项之间的差距答案

【问题标题】：Increase gap between select menu options增加选择菜单选项之间的差距
【发布时间】：2015-09-19 13:58:52
【问题描述】：

我正在使用选择标签在 HTML 中创建一个下拉列表。我无法增加选择列表中选项之间的差距。下面是我的代码。我怎样才能增加选项之间的差距？

<style type="text/css">
    #height {
        width: 200px;
    }
        #height option {
            width: 500px;
            height:200px !important;
        }
</style>

<select id="height">
    <option value="bugatti">Bugatti</option>
    <option value="lamborghini">Lamborghini</option>
    <option value="ferrari">Ferrari</option>
    <option value="levis">Levis</option>
    <option value="reebok">Reebok</option>
    <option value="nike">Nike</option>
</select>

【问题讨论】：

您可能会在使用标准 SELECT/OPTION 标签时遇到困难，因为不同的浏览器会以自己的方式呈现它们。（桌面和移动）- 你考虑过使用 CSS/JavaScript/jQuery 的下拉菜单吗？
重复：stackoverflow.com/questions/5887133/cssselect-dropdown-option，stackoverflow.com/questions/10825332/…，stackoverflow.com/questions/17186777/… 不能用标准方法完成。您将需要使用 Bootstrap 之类的东西来实现您想要的。
表单元素难以设置样式（选择、复选框、单选等）。您可以使用另一个元素并将其与 JS 结合使用，但这会降低其可访问性。唯一正确的建议，什么也不做。
Select option padding not working in chrome 的可能副本
How can I add padding to html dropdownlist?的可能重复

标签： html css

【解决方案1】：

选项标签的渲染是由浏览器决定的，它们有自己独特的方式，因此选项标签的填充甚至边距等限制在mozilla firefox中有效，而在chrome中无效。

总结：如果非常需要改变外观，可以使用自定义 JS 插件。

【讨论】：

【解决方案2】：

这是不可能的。如果你真的需要这个，你应该创建一个自定义选项菜单。

没有填充、边距、高度或行高适用于选项。您可以在元素之间使用空选项，但这不是一个好的解决方案。

【讨论】：

【解决方案3】：

我发现了一种解决方法：只增加一个元素的字体大小（我选择了第一个元素，我始终将其保留为空白）。我用 Javascript 以编程方式完成了它：

document.getElementById("myddl").options[0].style.fontSize = "xx-large";

这会强制所有选项以相同（放大）的空间显示，即使其他选项的字体大小未更改。

【讨论】：

【解决方案4】：

Woooo 我用不同的浏览器尝试过这个，我发现通过为选择标签的选项提供 填充，这将只在 FireFox 中有效，除了其他浏览器，如 (crome,Ie,safari)...！！ !!!!

奇怪..!!!!

所以你可以尝试使用该下拉菜单

或用于下拉菜单的 jquery 插件

【讨论】：