您可以使用内联样式向<option>标记添加自定义样式。

<option style="font- family:宋体;“>选项1 > < /选项 这将只对这个<option>元素应用样式。

然后你可以使用一点javascript魔法，将内联样式应用到<select>标签中的所有<option>元素，如下所示:

var select = $(document).getElementById('#select-element-id')

Var选项= select.children('#option-element-id')

option.css(“粗细”、“大胆”)

option.css(“字体大小”、“24 px”)

您也可以使用<option value="" disabled> <br> </option>在选项之间添加换行符。

如果你不想使用JavaScript，试试这个:

select {
  margin-top: 2% !important;
  font-size: 19px !important;
  text-align: center !important;
  width: 25% !important;
  padding: 6px 12px !important;
}
option {
  min-height: 1.5rem !important;
  padding: 14px !important;
}

似乎我可以直接在Chrome或Firefox中为选择设置CSS。CSS和HTML代码提供如下:

. boldoption { font-weight: bold; 的 选择< > <option>一些规范-字体 <option>另一种规范-字体option</option> <option class=“boldoption”>一些勇敢的选择</option> 选择< - >

这里有一些方法来样式<option>和<select>如果你使用Bootstrap和/或jquery。我知道这不是最初的海报要问的问题，但我想我可以帮助其他无意中遇到这个问题的人。

您仍然可以实现分别为每个<option>设置样式的目标，但可能还需要对<select>应用一些样式。我最喜欢的是下面提到的“Bootstrap Select”库。

---

Bootstrap选择库(jquery)

如果你已经在使用bootstrap，你可以尝试bootstrap Select库或下面的库(因为它有一个bootstrap主题)。

注意，您可以对整个选择元素或选项元素分别设置样式。

例子:

依赖:需要jQuery v1.9.1+， Bootstrap, Bootstrap的下拉菜单.js组件，和Bootstrap的CSS

兼容性:不确定，但bootstrap说它“支持所有主流浏览器和平台的最新稳定版本”

演示:https://developer.snapappointments.com/bootstrap-select/examples/

.special { font-weight: bold !important; color: #fff !important; background: #bc0000 !important; text-transform: uppercase; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script> <select class="selectpicker"> <option>Mustard</option> <option class="special">Ketchup</option> <option style="background: #5cb85c; color: #fff;">Relish</option> </select>

---

Select2 (JS lib)

你可以使用一个叫做Select2的库。

依赖:库是JS + CSS + HTML(不需要JQuery)。

兼容性:IE 8+， Chrome 8+， Firefox 10+， Safari 3+， Opera 10.6+

演示:https://select2.org/getting-started/basic-usage

还有一个引导主题可用。

无引导的例子:

$(function() { var $select = $('.select2'); $select.select2({ theme: 'paper' }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/> <select class="select2 form-control" placeholder="Country"> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> </select>

自举的例子:

$(function() { var $select = $('.select2'); $select.select2({ theme: 'paper' }); }); <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/> <select class="select2 form-control" placeholder="Country"> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> </select>

---

MDBootstrap ($ & Bootstrap & JQuery)

如果你有多余的钱，你可以使用高级库MDBootstrap。(这是一个完整的UI工具包，所以它不轻)

这允许您使用材质设计来设置选择和选项元素的样式。

有一个免费的版本，但它不允许你使用漂亮的材质设计!

依赖:Bootstrap 4, JQuery，

兼容性:“支持所有主流浏览器和平台的最新稳定版本。”

演示:https://mdbootstrap.com/docs/jquery/forms/select/ #颜色

正如已经提到的，唯一的方法是使用一个插件来替换<select>功能。

jQuery插件列表:http://plugins.jquery.com/tag/select/

看一下使用Select2 plugin: http://jsfiddle.net/swsLokfj/23/的例子

这是一个html css代码，用于样式选项和选择标签。 选择的选项:背景和粗体 关闭后，它看起来是斜体。

    <style>
        .mydropdown{
         border:none;
         border-bottom:2px dotted black;
         display:inline;max-width:20%;
         font-style: italic;
         font-weight: 600;
         cursor: pointer;  
    }
    .mydropdown:hover , .myoption:active , .myoption:checked{
         border:2px dotted green;
    }
    .myoption{
         font-style: normal;
    }
    .mydropdown .myoption:checked,
    .mydropdown .myoption:hover ,
    .mydropdown .myoption:active {
        font-style: italic;
        font-weight: 600;
     }
    </style>