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

【问题标题】：Border bottom for select box option not working on chrome选择框选项的边框底部不适用于 chrome
【发布时间】：2016-11-08 09:15:21
【问题描述】：

我想underline select 框上的禁用选项。查看我的代码，

代码

#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 中也能做到这一点？

JS Fiddle

【问题讨论】：

标签： html css google-chrome select

【解决方案1】：

根据 ElectricToolbox 中的 Article，border 不是您可以在使用 Chrome 时在 select/option/optgroup 中设置样式的属性。

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

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

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

如果你想自定义selects，你可能想试试这里的一些选择插件，比如：

【讨论】：

我相信border 适用于<select>，但不适用于<option> 或<optgroup>。我之所以提到这一点，是因为 <select> 在您对 border 属性的答案的开头被挑出来。
^ 我只是来自 Google，因为 border 不在 Chrome 中为我的 select 元素工作。

【解决方案2】：

看起来你只能在 Firefox 中使用 option 元素的边框，就像 this 一样。

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

【讨论】：