你可以添加一个类并给出font-weight:700;在选择。但是通过使用这个，所有的文本将变成粗体。

一些属性可以为<option>标签设置样式:

字体类型 颜色 字体- * 背景颜色

此外，您可以使用自定义字体的个人<选项>标签，例如任何谷歌字体，材质图标或其他图标字体从icomoon或类似。(这可能会方便字体选择器等)

考虑到这一点，您可以创建字体家族堆栈，并在<option>标记中插入图标，例如。

    <select>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">a    ★★★</option>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">b    ★★★★</option>
    </select>

★取自Icons，其余取自Roboto。

注意，自定义字体并不适用于移动选择。

如果你不想使用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;
}

它肯定会起作用。 选择选项是由OS而不是html呈现的。这就是为什么CSS样式没有效果，..一般 选项{font-size: value; background - color: colorCode; border - radius:价值;｝ 这将工作，但我们不能自定义填充，边距等。

下面的代码100%工作自定义选择标记从这个例子

var x, i, j, selElmnt, a, b, c; /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("custom-select"); for (i = 0; i < x.length; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < selElmnt.length; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /*when an item is clicked, update the original select box, and the selected item:*/ var y, i, k, s, h; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; h = this.parentNode.previousSibling; for (i = 0; i < s.length; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); for (k = 0; k < y.length; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); for (i = 0; i < y.length; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < x.length; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect); /*the container must be positioned relative:*/ .custom-select { position: relative; font-family: Arial; } .custom-select select { display: none; /*hide original SELECT element:*/ } .select-selected { background-color: DodgerBlue; } /*style the arrow inside the select element:*/ .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /*point the arrow upwards when the select box is open (active):*/ .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /*style the items (options), including the selected item:*/ .select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; } /*style items (options):*/ .select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /*hide the items when the select box is closed:*/ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } <div class="custom-select" style="width:200px;"> <select> <option value="0">Select car:</option> <option value="1">Audi</option> <option value="2">BMW</option> <option value="3">Citroen</option> <option value="4">Ford</option> <option value="5">Honda</option> <option value="6">Jaguar</option> <option value="7">Land Rover</option> <option value="8">Mercedes</option> <option value="9">Mini</option> <option value="10">Nissan</option> <option value="11">Toyota</option> <option value="12">Volvo</option> </select> </div>

实际上你可以添加:before和:after并设置样式。至少它是有意义的

选择{ 字体大小:18 px; background - color: # ffffff; ｝ 之前选择:{ 内容:“>”; 字体大小:20 px; 显示:没有; padding-right: 10 px; padding-left: 5 px; 颜色:# fff; ｝ 选择:徘徊:{之前 显示:内联; ｝ <select id="ddlProducts" name="ddProducts"> <option>Product1: Electronics </option> <option>Product2: Sports </option> < /选择>

可以应用于<option>元素的样式属性很少。

这是因为这种类型的元素是一个“替换元素”的例子。它们依赖于操作系统，不是HTML/浏览器的一部分。它不能通过CSS样式。

有一些替换的插件/库看起来像<select>，但实际上是由常规的HTML元素组成的，可以设置样式。