加粗下拉第一个值

-2

我必须将下拉文本中的第一个值设为粗体。我尝试使用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; 
     }

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

来源

2016-01-20 Sanjay

你尝试过'选择：第一个孩子'吗？ – alex

尝试过，但没有成功。 – Sanjay

使用CSS时，选择下拉菜单中的样式选项的跨浏览器行为如此不一致。例如，在Firefox中，可以在下拉菜单中使用粗体显示项目，但是在Chrome浏览器中不可以，并且这包括optgroup。如果这些样式很重要，而且您希望跨浏览器一致性，那么您可以考虑使用div等自定义下拉菜单。 – Raevenk

尝试这种方式

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

来源

2016-01-20 10:22:13

试图在铬和Safari浏览器。但不工作。 – Sanjay

https://code.google.com/p/chromium/issues/detail?id=44917&q=select%20styling%20bold&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified #makechanges –

是的。在Firefox中工作..！ – Sanjay

你应该尝试像这个 -

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>

来源

2016-01-20 10:24:39

我试过这个，但没有运气为我的情况。 – Sanjay

在Chrome中似乎不适用于我。 – alex

-1

其实你不能大胆的选项。

唯一的方法来突出或加粗是使其成为一个选项组

<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

来源

2016-01-20 10:40:19 Maqk

在这里，我不能拥有组，因为下拉菜单中的所有值都属于单一类型。在下拉菜单中是不可能有一个大胆的值？ – Sanjay

默认情况下，该选项值不支持粗体字体粗体。但是你可以使用伪类来着色该值。 – Maqk

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

将做的工作，但只适用于Firefox，而不是在谷歌铬或在徒步旅行队。

来源

2016-01-21 04:24:07 Sanjay

加粗下拉第一个值

回答

相关问题