选择框选项的边框底部不适用于Chrome [英] Border bottom for select box option not working on chrome

问题描述

我想在选择框中下划线禁用选项。查看我的代码，

CODE

-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  #myselect option {font-size：13px;颜色：＃1A1F24;}＃myselect选项：disabled {font-size：11px;颜色：＃ABB6C0; border-bottom：1px solid＃ABB6C0;}  

< select id =myselect> < option value =1>一个< / option> < option value =2disabled>两个< / option> < option value =3>三个< / option> < option value =4> Four< / option>< / select>

这段代码在firefox中正常工作。不在铬中工作。如何使用chrome工作？

JS小提琴

解决方案

根据 Article from border 它不是您可以在<$ c使用Chrome时，请选择 / 选项 / optgroup 。

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

• 字体风格的


• font-weight


• color


• background -color


• font-family


• font-size


• 填充

注意上面的ese属性仅适用于一个元素，例如， padding 仅适用于 select

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

• Bootstrap Select


• 选择2

I would like to underline the disabled options on a select box. See my code,

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>

This code works fine in firefox. Not working in chrome. How to make work this in chrome too ?

JS Fiddle

解决方案

According to this Article from ElectricToolbox , border it isn't a property that you can style in select/option/optgroup when using Chrome.

Here is the properties you can style:

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

Note : that some of these properties above only work for one the elements, for example, padding only will work in select

If you want to customize selects you may want to try some of the selects plugins out here, like :

• Bootstrap Select
• Select2

这篇关于选择框选项的边框底部不适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！