如何使用CSS修改下拉菜单选中状态下选项的字体大小？

两种场景的CSS解决方案： #

• 修改下拉菜单当前选中并显示的文字大小
  直接给目标下拉框设置字体大小，结合你的HTML结构（带有form-control类和roleID），用以下CSS保证优先级覆盖Bootstrap默认样式：

  #role.form-control {
    font-size: 16px; /* 替换为你需要的字体大小 */
  }
  

• 修改下拉展开后选中状态选项的字体大小
  使用:checked伪类选中下拉列表里被标记为选中的选项，设置字体大小：

  #role.form-control option:checked {
    font-size: 18px; /* 替换为你需要的字体大小 */
  }
  

注意事项： #

• 部分浏览器原生对<option>标签的样式支持有限，如果上述代码未达到预期效果，建议使用自定义下拉组件（如Bootstrap Select）来实现更灵活的样式控制。
• 由于你的代码使用了Bootstrap的form-control类，必须通过结合ID的选择器（#role.form-control）提升优先级，才能覆盖框架默认样式。

你的HTML代码参考： #

<div class="col-md-3">
    <label for="role">نقش پرسنل :</label>
</div>
<div class="form-group col-md-5">
    <select class="form-control" id="role" name="SelectedRoles">
        <option selected>معاونت مورد نظر را انتخاب کنید</option>
        @foreach (var item in Roles)
        {
            <option value="@item.RoleId"> @item.RoleTitle</option>
        }
    </select>
</div>

内容的提问来源于stack exchange，提问作者Ashkan Amjad