选择框选项的边框底部不适用于chrome

Question

我想在underline框中select禁用选项。看我的代码，

CODE

＆＃13;

＆＃13;

#myselect option {
  font-size: 13px;
  color: #1A1F24;
}
#myselect option:disabled {
  font-size: 11px;
  color: #ABB6C0;
  border-bottom: 1px solid #ABB6C0;
}

＆＃13;

<select id="myselect">
  <option value="1">One</option>
  <option value="2" disabled>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

＆＃13;

＆＃13;

＆＃13;

此代码在Firefox中运行良好。没有使用chrome。如何在chrome中完成这项工作？

JS Fiddle

Answer 1

根据来自ElectricToolbox的Article，border使用Chrome时，您不能在select / option / optgroup中设置样式

以下是您可以设置样式的属性：

• 的 font-style
• 的 font-weight
• 的 color
• 的 background-color
• 的 font-family
• 的 font-size
• 的 padding

注意：以上某些属性仅适用于其中一个元素，例如，padding仅适用于select

如果您想自定义selects，可能需要尝试一些选择插件，例如：

• Bootstrap Select
• Select2

Answer 2

根据this，您似乎只能在Firefox中使用option元素的边框。

您需要创建自定义下拉列表控件才能实现通用解决方案。查看Custom Drop-Down List Styling了解一些示例。