加粗下拉列表中的第一个值答案

【问题标题】：Bold the 1st value in dropdown加粗下拉列表中的第一个值
【发布时间】：2016-01-21 12:24:07
【问题描述】：

我必须将下拉文本中的第一个值设为粗体。我尝试使用 ng-class 属性，因为 UI 是在 angularjs 中开发的，但没有成功。现在，我正在尝试使用第一个子选择器来使用css。我尝试了以下样式。

1)
select#ad-version-select.form-control : first-child {
  font-weight: bold;
}

2)
select#ad-version-select.form-control >: first-child {
  font-weight: bold;
}

但是上面的样式。没用。如果我使用

select#ad-version-select.form-control {
            font-weight: bold;
        }

下拉菜单中的所有值都变为粗体。如何仅使 dropdown 中的第一个值显示为粗体？我不能使用javascript 或jquery。请帮助我css。

【问题讨论】：

你试过option:first-child 吗？
试过但没用..
使用 CSS 时，选择下拉列表中样式选项的跨浏览器行为是如此不一致。例如，在 Firefox 中，可以在下拉列表中将项目设为粗体，但在 Chrome 中则不行，这包括 optgroup。如果这些样式很重要并且您希望跨浏览器保持一致，那么您可以考虑使用 div 的自定义下拉菜单，例如
在这种情况下，如果你不能使用 JavaScript（为什么？），那么你就不能跨浏览器。
@Raevenk。我将下拉列表放在一个 div 中，并使用 div 类名以及我提到的上述类。但它不起作用。你的意思是一样的吗？

标签： javascript html css angularjs

【解决方案1】：

试试这个方法

select#ad-version-select.form-control option:nth-child(1){
    font-weight:bold;
}

【讨论】：

code.google.com/p/chromium/issues/…
是的。在 Firefox 中工作..！

【解决方案2】：

你应该这样尝试-

select#ad-version-select.form-control option:first-child {
  font-weight: bold;
}

<select name="" id="ad-version-select" class="form-control">
  <option value="">option</option>
  <option value="">option</option>
  <option value="">option</option>
  <option value="">option</option>
</select>

【讨论】：

【解决方案3】：

select#ad-version-select.form-control option:nth-child(1) {
  font-weight: bold;
}

可以完成这项工作，但它仅适用于 Firefox，不适用于 google chrome 或 safari。

【讨论】：

【解决方案4】：

其实你不能加粗选项。

突出显示或加粗的唯一方法是将其设为选项组

<select>
    <optgroup label="Label Group">
       <option value="label value 1">Label 1</option>
       <option value="Label value 2">Label 2</option>
     </optgroup>
     <optgroup label="Label Group 2">
       <option value="label value 3">Label 3</option>
       <option value="label value 4">Label 4</option>
     </optgroup>
</select>

你可以在这里试试W3Schools

【讨论】：

在这里，我不能有组，因为下拉列表中的所有值都属于单一类型。下拉列表中不能有一个粗体值吗？
默认情况下，选项值不支持粗体字重。但是您可以使用伪类为值着色。