您可以使用内联样式向<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>在选项之间添加换行符。

这里有一些方法来样式<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/ #颜色

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

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

该元素由操作系统呈现，而不是HTML。它不能通过CSS样式。

$(function() { var clicky; var t=0; $(document).mousedown(function(e) { clicky = $(e.target); }); $(document).mouseup(function(e) { clicky = null; }); $("select").focusout(function(e) { if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) { $(this).parents().children("span.selected").html(clicky.html()); $(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true); } $(this).parents().children("span.lists").html(''); }); $('select > option').text(function(i, text) { var attr = $(this).attr('selected'); if (typeof attr !== typeof undefined && attr !== false) { $(this).parents().parents().children("span.selected").html(text); } }); $("select").focusin(function(){ $(this).children('option').text(function(i, text) { $(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>"); }); }); }); select { width: 0px; height: 0px; overflow:hidden; outline: none; border: none; appearance:none; -moz-appearance: none; } label{ display: inline-block; padding: 5px 10px; position: relative; width: 100px; height: 20px; background-color:#ccc; } label .selected{ display: inline-block; overflow: hidden; width: 100%; height: 100%; } label span.lists{ width: 100%; display: inline-block; position: absolute; top: 100%; left: 0px; box-shadow: 0px 0px 2px 0px #ccc; background-color:#fff; z-index: 9; } label span.item{ display: inline-block; width: 100%; border-bottom: 1px solid #ccc; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <form action="?" method="GET"> <label><span class="selected">select..</span> <span class="lists"></span> <select name="test"> <option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option> <option value="2" selected>item 2</option> <option value="3">item 3</option> <option value="4">item 4</option> </select> </label><br> <label><span class="selected">select..</span> <span class="lists"></span> <select name="test2"> <option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option> <option value="2">item 2</option> <option value="3" selected>item 3</option> <option value="4">item 4</option> </select> </label><br> <button>Submit</button> </form> </body> </html>

试试这个，可能会对你有帮助

[ https://codepen.io/venu9l/pen/jeNXzY][1]

您可以在某种程度上设置选项元素的样式。

使用* CSS选择器，您可以在系统绘制的框内设置选项的样式。

例子:

#ddlProducts *
{
 border-radius: 15px;
 background-color: red;
}

它看起来是这样的:

这里留下一个快速的替代方法，使用表上的类切换。它的行为与选择非常相似，但是可以使用过渡、滤镜和颜色进行样式化，每个子元素都是独立的。

function toggleSelect(){ if (store.classList[0] === "hidden"){ store.classList = "viewfull" } else { store.classList = "hidden" } } #store { overflow-y: scroll; max-height: 110px; max-width: 50% } .hidden { display: none } .viewfull { display: block } #store :nth-child(4) { background-color: lime; } span {font-size:2rem;cursor:pointer} <span onclick="toggleSelect()">⮋</span> <div id="store" class="hidden"> <ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul> </div>