如何为HTML的“select”元素中的选项添加样式？

Question

如何为HTML的“select”元素中的选项添加样式？

364

这是我的HTML：

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

我想使用CSS将产品名称（例如“Product1”，“Product2”等）加粗，并将其类别（即电子产品，运动等）斜体化。我发现一个旧问题提到无法使用HTML和CSS实现，但希望现在有解决方案。

- MrClan

不确定这个。但我想不行。你需要一些 JavaScript（jQuery）的魔法才能实现。 - Madara's Ghost

9

选项的样式仍然像以前一样令人讨厌。你可能想要使用的是optgroup：http://htmlhelp.com/reference/html40/forms/optgroup.html这将给你一个加粗和斜体的类别（比如电子产品），在该类别下会有一堆选项。 - wolv2012

1

最佳解决方案 => https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select - mehmet

我最终使用了Bootstrap的下拉菜单功能：https://getbootstrap.com/docs/5.2/components/dropdowns/ - xhafan

23个回答

130

不可能实现，因为这些元素的样式由用户的操作系统处理。可以在这里查看MSDN对此问题的解答:

除了background-color和color之外，在选项元素的样式对象中应用的样式设置将被忽略。

- esqew

3

所以结论是："仅使用CSS无法部分样式化选择框选项"，对吗？:( - MrClan

70

重要的一点是，它们是可以被样式化的，但只能进行非常基本的样式处理。 - devios1

1

补充devios的观点，本地选择器可以最小化地为Windows进行样式设置，但不一定适用于其他操作系统。如下所述，您需要将选择器替换为其他元素（通常是ul），并在JavaScript中复制选择器功能以完全控制样式。 - Benjamin Robinson

5

对我来说不起作用...有什么建议吗？ - fabio

2

style="background-color: red;color: red;" 对我不起作用。编辑：关闭开发者控制台后，样式被应用。 - Black

更新: 你会注意到选项没有继承父元素设置的字体。您也无法一致地设置间距和颜色。例如，Firefox将在< option>元素上设置颜色和背景颜色，而Chrome则不会。它们两个都不会应用任何类型的间距(例如填充)。更多信息请参见此处和此处：https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling 和 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select - Andrew

50

你可以在一定程度上为选项元素添加样式。

使用 * CSS 选择器，您可以为系统绘制的框内部的选项添加样式。

示例：

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

那会长成这个样子：

enter image description here

- Zoron19

3

只有因为全选选择器会针对影子 DOM 内部进行目标选择，才能够通过每个浏览器手动地选择这些内容。 - zrooda

1

这是不正确的，即使你使用 * 也只能为背景和颜色设置样式。 - Goutham Harshith

2

@goutham Harshith 因此出现了“在某种程度上”的措辞。 - Zoron19

26

我发现并使用了这个很好的样式化选择器和选项的例子。你可以用这个选择器做任何想做的事情。这里是Fiddle。

// Iterate over each select element
$('select').each(function() {

  // Cache the number of options
  var $this = $(this),
    numberOfOptions = $(this).children('option').length;

  // Hides the select element
  $this.addClass('s-hidden');

  // Wrap the select element in a div
  $this.wrap('<div class="select"></div>');

  // Insert a styled div to sit over the top of the hidden select element
  $this.after('<div class="styledSelect"></div>');

  // Cache the styled div
  var $styledSelect = $this.next('div.styledSelect');

  // Show the first select option in the styled div
  $styledSelect.text($this.children('option').eq(0).text());

  // Insert an unordered list after the styled div and also cache the list
  var $list = $('<ul />', {
    'class': 'options'
  }).insertAfter($styledSelect);

  // Insert a list item into the unordered list for each select option
  for (var i = 0; i < numberOfOptions; i++) {
    $('<li />', {
      text: $this.children('option').eq(i).text(),
      rel: $this.children('option').eq(i).val()
    }).appendTo($list);
  }

  // Cache the list items
  var $listItems = $list.children('li');

  // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
  $styledSelect.click(function(e) {
    e.stopPropagation();
    $('div.styledSelect.active').each(function() {
      $(this).removeClass('active').next('ul.options').hide();
    });
    $(this).toggleClass('active').next('ul.options').toggle();
  });

  // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
  // Updates the select element to have the value of the equivalent option
  $listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
    /* alert($this.val()); Uncomment this for demonstration! */
  });

  // Hides the unordered list when clicking outside of it
  $(document).click(function() {
    $styledSelect.removeClass('active');
    $list.hide();
  });

});

body {
  padding: 50px;
  background-color: white;
}

.s-hidden {
  visibility: hidden;
  padding-right: 10px;
}

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font: normal 11px/22px Arial, Sans-Serif;
  color: black;
  border: 1px solid #ccc;
}

.styledSelect {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
  padding: 0 10px;
  font-weight: bold;
}

.styledSelect:after {
  content: "";
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-color: black transparent transparent transparent;
  position: absolute;
  top: 9px;
  right: 6px;
}

.styledSelect:active,
.styledSelect.active {
  background-color: #eee;
}

.options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0 0;
  padding: 0 0;
  list-style: none;
  border: 1px solid #ccc;
  background-color: white;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.options li {
  padding: 0 6px;
  margin: 0 0;
  padding: 0 10px;
}

.options li:hover {
  background-color: #39f;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="selectbox1">
  <option value="">Select an option&hellip;</option>
  <option value="aye">Aye</option>
  <option value="eh">Eh</option>
  <option value="ooh">Ooh</option>
  <option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
  <option value="">Month&hellip;</option>
  <option value="january">January</option>
  <option value="february">February</option>
  <option value="march">March</option>
  <option value="april">April</option>
  <option value="may">May</option>
  <option value="june">June</option>
  <option value="july">July</option>
  <option value="august">August</option>
  <option value="september">September</option>
  <option value="october">October</option>
  <option value="november">November</option>
  <option value="december">December</option>
</select>

- Anahit Ghazaryan

4

请问您能否在这里发布代码呢？因为也许有一天它会被删除，但是在这里它将会保存在安全的地方。 - Mohammad Alabed

这是一种非常动态的使用select的方式，如果您有更好的选择，我很乐意在这里看到它作为答案 @ahnbizcad - Ana DEV

53

这并不是原生的html<select>标签，而只是用一些jQuery代码重新渲染了它。如果你要这么做，最好使用处理键盘上下、自动完成/搜索等功能的jQuery插件、React组件等。 - John Culviner

哇。为了弥补错误决策而让操作系统负责选项元素，真是一大堆工作，即使它能正常运行。 - David Spector

17

以下是在使用Bootstrap和/或jQuery时如何为<select>样式化<option>的方法。虽然这不是原帖所问，但我认为我可以帮助其他人。

您仍然可以单独为每个<option>设置样式，但可能还需要对<select>应用一些样式。我最喜欢的是下面提到的"Bootstrap Select"库。

Bootstrap Select 库（jquery）

如果您已经在使用bootstrap，则可以尝试Bootstrap Select库或下面的库（因为它具有bootstrap主题）。

请注意，您可以为整个select元素或单独的option元素设置样式。

示例：

依赖项：需要 jQuery v1.9.1+、Bootstrap、Bootstrap 的 dropdown.js 组件和 Bootstrap 的 CSS

兼容性：不确定，但bootstrap表示它"支持所有主要浏览器和平台的最新稳定版本"

Demo: 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库）

有一个叫做Select2的库可供使用。

依赖项：该库仅包含JS + CSS + HTML（无需JQuery）。

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

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

还有一个bootstrap主题可用。

没有Bootstrap示例：

$(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>

Bootstrap示例：

$(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 Kit，所以不太轻便）

这使您可以使用Material Design样式化您的选择和选项元素。

有一个免费版本，但它不允许您使用漂亮的Material Design！

依赖项：Bootstrap 4，JQuery，

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

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

- Katie

24

因为问题涉及到option元素的样式，而不是select元素。 - Jsalinas

7

这个答案有误导性，因为虽然你明确展示了可以对 select 进行样式设置，但你声称可以样式化 option，尽管它是操作系统元素，只能接受极少量的 CSS 样式设置。 - Andrew Gray

@Jsalinas 抱歉，我的上一个回答太糟糕了。我已经换成了一个希望更好的回答。 - Katie

Select2 4.0 不再是纯粹的，因为它现在基于 jQuery 构建。 - galmok

16

似乎我可以直接在Chrome或Firefox中设置select的CSS。下面提供CSS和HTML代码：

.boldoption {
    font-weight: bold;
}

<select>
    <option>Some normal-font option</option>
    <option>Another normal-font option</option>
    <option class="boldoption">Some bold option</option>
</select>

- HoldOffHunger

2

@Muhamed Al Khalil：我更新了示例以使其更清晰，因为当前选定的选项也有自己的样式。如果这不起作用，我怀疑是浏览器兼容性问题。 =\ - HoldOffHunger

3

@Akash：有趣，这在Firefox发布Firefox Quantum之前可以使用，目前在Chrome上仍然有效（超过60％的用户）。我打赌这是一个错误！ - HoldOffHunger

1

这仅适用于下拉菜单，而不适用于显示为选定的内容。太糟糕了。 - WebDude0482

@bcag2：在FF中运行良好，刚刚发布了一张图片。 OP正在询问如何为整个选项设置样式，没有足够的空间来真正解决每个边缘情况。干杯。 - HoldOffHunger

2

2022年在OSX上使用Chrome浏览器无法显示。 - mplungjan

显示剩余5条评论

7

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

font-family
color
font-*
background-color

此外，您可以为单个<option>标签使用自定义字体，例如Google字体、Material Icons或来自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。

但要注意，自定义字体在移动端选择中不起作用。

- dy_

<option style="color: 'red';"> 对我不起作用... 有什么建议吗？ - fabio

3

移除对"red"的引号：<option style="color: red;"> - dy_

4

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

以下是一些jQuery插件列表：http://plugins.jquery.com/tag/select/

可以查看使用Select2插件的示例：http://jsfiddle.net/swsLokfj/23/

- pumbo

在当前的jQuery Select2 4.x中，现在执行此操作的方式已经不同了。请参见：示例，文档。 - tanius

4

实际上，您可以添加:before和:after并对其进行样式设置。至少这是某种方式。

option {
  font-size: 18px;
  background-color: #ffffff;
}

option:before {
  content: ">";
  font-size: 20px;
  display: none;
  padding-right: 10px;
  padding-left: 5px;
  color: #fff;
}

option:hover:before {
  display: inline;
}

<select id="ddlProducts" name="ddProducts">
  <option>Product1 : Electronics </option>
  <option>Product2 : Sports </option>
</select>

- ProSales Softwaresysteme

1

只需字体大小。 - user956584

3

Bootstrap允许您通过data-content使用样式：

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

Example: https://silviomoreto.github.io/bootstrap-select/examples/

- Bhetzie

17

在数据属性中嵌入HTML让我感到非常不舒服。 - Ben Hull

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Diodeus - James MacFarlane · Accepted Answer

362

只有少量样式属性可以应用于<option>元素。

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

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

- Diodeus - James MacFarlane

3

这种行为因浏览器和操作系统的不同而有所差异；如果你主要指的是Windows上的IE浏览器，最好进行澄清。 - Vince Bowdren

10

你可以对 select > option 进行样式设置，但目前没有可靠的跨浏览器方案来实现这一点。至少在 Chrome 上，你最多只能自定义字体大小、字体类型、背景和前景颜色。也许还有其他微调选项，但像填充、悬停颜色之类的我无法成功修改。确实可能存在替代方案，但根据项目需求，<select> 标签可能是必要的，例如用于 Angular 验证或其他原因。 - Felype

5

我已经回答了如何样式化<option>标签的问题。我没有展示如何给<option>标签添加样式，但是我展示了如何模拟<select>标签，以便您可以对选项进行样式设置。 - UndoingTech

3

在移动设备中，这种样式化甚至更加困难，因为选项元素不像在传统浏览器中那样显示在与选择器相关的页面流中，而是在屏幕底部以单独可滚动的方式列出，其样式与您在传统浏览器中所期望的完全不同。 - awe

4

无法确定是否可以进行样式设计（只有一些小的选项）。请参考w3schools网站上的这篇如何文章，使用JS完全自定义它：https://www.w3schools.com/howto/howto_custom_select.asp - Milton

显示剩余2条评论