css - 使用 CSS 为选择下拉菜单设置样式

Question

我希望为第一个选项（搜索俱乐部）设置样式，使其为粗体，其余为正常字体粗细。我可以将第一个选项设置为粗体，但仅在单击下拉菜单后才会显示为粗体，它将在所选视图中保持正常

<select name="" id="">
  <option value="">Search Clubs</option>
  <option value="">Bodyshots Kickboxing Gym</option>
  <option value="">Champions Kickboxing Club</option>
  <option value="">North East Mugendo: Forkhill</option>
  <option value="">North East Mugendo: Newry</option>
  <option value="">North East Mugendo: Lordship</option>
</select>

Answer 1

这是不可能的，因为您正在尝试设置<select>标签的影子 DOM 的样式。

在此处了解 shadow DOM：

http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

某些浏览器允许您进行一定程度的样式设置，例如：

如果更改字体系列怎么办？

select {
  font-family: Cursive;
}

WebKit 浏览器（Safari、Chrome）会忽略你。Firefox、Opera 和 IE 将尊重您的更改。虽然字体系列不会级联到选择中，但您必须在它们上显式声明它。

阅读更多相关信息：

http://css-tricks.com/dropdown-default-styling/