如何将 CSS（特别是 padding/margin ）应用于选择下拉列表的选项或 optgroup？答案

【问题标题】：How to apply CSS(specially padding/margin ) to options or optgroup of select drop down?如何将 CSS（特别是 padding/margin ）应用于选择下拉列表的选项或 optgroup？
【发布时间】：2012-09-11 15:26:19
【问题描述】：

填充或边距 CSS 仅适用于 FF 浏览器中的选项。我在 IE chrome 中尝试过同样的事情，但不起作用。有人可以告诉我如何在选择菜单中设置样式（填充/边距）选项。

【问题讨论】：

大多数浏览器不支持此功能，因为它会改变用户体验。他们通常希望用户看到本机操作系统表单控件。如果样式元素很关键，请使用一个库，该库将表单控件替换为可以使用 CSS 设置样式的自定义 HTML。
你为什么不展示你的尝试？

标签： javascript asp.net html

【解决方案1】：

有一个 DropKick JQuery library ，您可以在其中自定义下拉菜单（它会自动用此元素替换本机下拉菜单，因此您无需在 html 代码中替换 <select> 元素。

【讨论】：

所有选项和 optgroup 需要显示在同一垂直线上。现在它在一行中显示 optgroup 并为选项添加一些填充或边距。

【解决方案2】：

您不会看到填充或边距选项。那是因为不需要它。我通常做的是将选择下拉列表包装在一个 div 中并设置它的样式。

.myDropdown 选择{ 边框：实心 1px 红色；字体粗细：正常；宽度：300 像素；高度：40 像素；字体大小：12 像素；背景：#FFC； }

填充不可用的原因是因为它确实不需要。您可以调整框的高度或宽度以及字体大小。调整高度和宽度实质上会在选择中的文本周围增加更多空间。除了调整这些设置之外，其他任何事情都只是矫枉过正。如果您真的想要对样式进行如此多的控制，请使用 jQuery UI 或 bootstrap 之类的东西。

【讨论】：

对用例固执己见并不能做出好的回应。
“不需要” ?这根本不是一个好的答案。这是设计师做出的决定。