选择框选项的边框底部在 Chrome 上不起作用

我想underline上的禁用选项select盒子。看我的代码，

CODE

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

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

这段代码在 Firefox 中运行良好。不适用于镀铬。如何在 chrome 中也实现这样的工作？

JSFiddle https://jsfiddle.net/vinodvt22/cqm8anc2/

根据这个Article http://www.electrictoolbox.com/style-optgroup-option-css-chrome/来自电动工具箱，border它不是一个可以设置样式的属性select/option/optgroup使用 Chrome 时。

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

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

Note：上面的某些属性仅适用于一个元素，例如，padding只会工作在select

如果您想定制selects您可能想尝试这里的一些精选插件，例如：

• 引导选择 https://github.com/silviomoreto/bootstrap-select
• Select2 https://select2.github.io/