select下拉菜单option文字粗体的实现方法

实现 select 下拉菜单 option 文字粗体有多种方法，下面我将介绍两种比较常用的方法。

方法一：使用 CSS font-weight 属性

可以使用 CSS 的 font-weight 属性来设置选中的 option 文字的粗细程度。

<select>
  <option value="1">普通</option>
  <option value="2" style="font-weight: bold;">加粗</option>
</select>

在上面的示例代码中，我们为第二个 option 元素添加了样式 font-weight: bold;，这样在下拉菜单中选中该选项时，显示的文字就会变成粗体。

方法二：使用 CSS 伪类

除了使用 font-weight 属性外，我们还可以使用 CSS 伪类 :checked 来修改选中的 option 样式。

<style>
  select option:checked {
    font-weight: bold;
  }
</style>
<select>
  <option value="1">普通</option>
  <option value="2">加粗</option>
</select>

在上面的示例代码中，我们使用 :checked 伪类来为选中的 option 元素添加样式 font-weight: bold;，这样选中该选项时，显示的文字就会变成粗体。

需要注意的是，使用这种方法的前提是需要使用 label 元素将 select 元素和 option 元素进行关联，否则选中 option 元素时不会触发 select 元素的 onchange 事件。

<label>
  选择：
  <select onchange="console.log(this.value)">
    <option value="1">普通</option>
    <option value="2">加粗</option>
  </select>
</label>

在上面的示例代码中，我们使用了 label 元素将 select 元素和文本进行关联，使得选中 option 时可以触发 onchange 事件，并在控制台中输出选中的值。