如何为 html“选择”元素的选项设置样式？
Posted
技术标签:
【中文标题】如何为 html“选择”元素的选项设置样式？【英文标题】：How to style the option of an html "select" element? 【发布时间】：2011-11-04 17:53:36 【问题描述】：这是我的 html：
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
我想将产品名称（即“Product1”、“Product2”等）加粗，并将其类别（即电子、运动等）加粗，仅使用 CSS。我发现了一个老问题，提到使用 HTML 和 CSS 是不可能的，但希望现在有一个解决方案。
【问题讨论】：
不确定这个。我认为不是。你需要一些 javascript (jQuery) 魔法才能做到这一点。 选项仍然像以往一样令人讨厌。您可能想要使用一个 optgroup：htmlhelp.com/reference/html40/forms/optgroup.html 这将为您提供一个粗体和斜体的类别（如电子产品），其中有一堆选项。 最佳解决方案 => w3schools.com/howto/tryit.asp?filename=tryhow_custom_select 【参考方案1】：只有少数几个样式属性可以应用于<option> 元素。
这是因为这种类型的元素是“替换元素”的一个示例。它们依赖于操作系统，不是 HTML/浏览器的一部分。它不能通过 CSS 设置样式。
有一些替换插件/库看起来像 <select>，但实际上由 可以设置样式的常规 HTML 元素组成。
【讨论】：
这种行为因不同的浏览器和不同的操作系统而异；如果您主要谈论的是 Windows 上的 IE，那么值得澄清一下。 你可以设置select > option的样式，但是没有可靠的跨浏览器解决方案可以做到这一点，至少在chrome上你最多可以自定义字体大小、系列、背景和前景色。也许还有一些调整，但填充、悬停颜色等我无法成功更改。确实可能有其他选择，但根据项目的不同，可能需要
@none 我已经回复了Styling option tags。它没有展示如何设置<option> 的样式，但它确实展示了如何模拟<select>，以便您可以设置选项的样式。
在引入移动设备时，它的样式就更少了，因为选项元素甚至没有显示与页面流中的选择相关 - 它列在底部的单独可滚动部分中屏幕的 - 样式与您在传统浏览器中所期望的非常不同。
不能确定样式（选项只有小事）。请看一下 w3schools 的人提供的这个操作指南，以仅使用 JS 来完全自定义它：w3schools.com/howto/howto_custom_select.asp 这样你就可以【参考方案2】：
不，这是不可能的，因为这些元素的样式是由用户的操作系统处理的。 MSDN will answer your question here:
除了
background-color和color之外，通过选项元素的样式对象应用的样式设置将被忽略。
【讨论】：
所以结论是：“选择的选项不能仅使用 CSS 进行部分样式设置”，对吗？ :( 这里的重点是它们可以设置样式，只是非常少。 补充一下 devios 的观点——本机选择可以为 Windows 设置最小样式，但不一定适用于其他操作系统。正如 pumbo 在下面提到的，您需要将 select 替换为其他元素（通常是 ul）并在 JavaScript 中复制 select 功能以完全控制样式。style="background-color: red;color: red;" 对我不起作用。编辑：关闭开发者控制台后，应用了样式。【参考方案3】：
您可以在一定程度上设置选项元素的样式。
使用* CSS 选择器，您可以为系统绘制的框内的选项设置样式。
例子：
#ddlProducts *
border-radius: 15px;
background-color: red;
看起来像这样：
【讨论】：
这是真的，因为所有选择器都针对影子 DOM 内部，您可以在每个浏览器中手动定位它们。 这不是真的，即使你使用 * 你也可以设置背景和颜色。 @Goutham Harshith 因此是“在某种程度上”。【参考方案4】：我发现并使用了这个很好的例子来设置选择和选项的样式。你可以随心所欲地使用这个选择。这里是Fiddle
html
<select id="selectbox1">
<option value="">Select an option…</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…</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>
css
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;
JS
// 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();
);
);
【讨论】：
你能把代码贴在这里吗，因为也许有一天它会被删除，但它会留在保存的地方 这是一种非常动态的方式来做你想做的选择，如果你有更好的选择，我很乐意在这里看到它作为答案@ahnbizcad 这不是原生 html 它只是用一些 jQuery 代码重新渲染一个。如果你打算这样做，不妨使用 jQuery 插件、React 组件等来处理键盘 UP/DOWN、预输入/搜索等。【参考方案5】：如前所述，唯一的方法是使用替换 <select> 功能的插件。
jQuery插件列表：http://plugins.jquery.com/tag/select/
看一下使用Select2插件的例子：http://jsfiddle.net/swsLokfj/23/
【讨论】：
在当前的 jQuery Select2 4.x 中，执行此操作的方式现在有所不同。请参阅：example、docs。【参考方案6】：如果您使用的是 Bootstrap 和/或 jquery，这里有一些设置 <option> 和 <select> 样式的方法。我知道这不是原始发帖人要问的，但我想我可以帮助其他偶然发现这个问题的人。
您仍然可以实现为每个<option> 单独设置样式的目标，但可能还需要对<select> 应用一些样式。我最喜欢的是下面提到的“Bootstrap Select”库。
引导选择库 (jquery)
如果您已经在使用引导程序，您可以尝试 Bootstrap Select 库 或下面的库（因为它有引导程序主题）。
请注意，您可以为整个 select 元素或 option 元素单独设置样式。
例子：
依赖项：需要 jQuery v1.9.1+、Bootstrap、Bootstrap 的 dropdown.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 库)
您可以使用一个名为 Select2 的库。
依赖关系：库仅是 JS + CSS + HTML（不需要 JQuery）。
兼容性：IE 8+、Chrome 8+、Firefox 10+、Safari 3+、Opera 10.6+
演示：https://select2.org/getting-started/basic-usage
还有一个bootstrap theme 可用。
没有引导示例：
$(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 工具包，所以它并不轻巧）
这允许您使用Material design 设置您的选择和选项元素的样式。
有一个免费版本，但它不允许你使用漂亮的 Material 设计！
依赖项：Bootstrap 4、JQuery、
兼容性："supports the latest, stable releases of all major browsers and platforms."
演示：https://mdbootstrap.com/docs/jquery/forms/select/#color
【讨论】：
因为问题是关于 option 元素的样式，而不是 select 元素。 这个答案具有误导性，因为虽然您明确表明您可以设置 select 的样式，但您声称 option 是可以设置样式的，即使它是一个只接受最少 CSS 样式的 OS 元素。 @Jsalinas 抱歉，我之前的回答很糟糕。我已经用我希望更好的替换它。 Select2 4.0 不再纯粹，因为它现在建立在 jQuery 之上。【参考方案7】：似乎我可以直接在 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>【讨论】：
@Muhamed Al Khalil：我更新了示例以使其更加清晰，因为当前选择的选项也有自己的风格。如果这不起作用，那么我怀疑浏览器兼容性问题。 =\ @Akash：有趣的是，在他们发布 Firefox Quantum 之前，它在 Firefox 上运行，现在仍然在 Chrome 上运行（60% 以上的用户）。我敢打赌这是一个错误！ 这仅适用于下拉菜单，不适用于显示为选中的内容。太糟糕了。 @WebDude0482 如果您也希望显示为粗体的内容，您可以这样做select, option:checked font-weight: bold;
只能在 chromium/chrome 中使用，不能在 Firefox 中使用，并且所有文本都是粗体，我们不能混合使用“粗体 - 非粗体”文本【参考方案8】：
一些属性可以为<option>标签设置样式：
font-family
color
font-*
background-color
您还可以为单个<option> 标签使用自定义字体，例如任何google font、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。
请注意，自定义字体不适用于移动选择。
【讨论】：
删除red上的引号：【参考方案9】：
Bootstrap 允许您通过数据内容使用样式：
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
示例： https://silviomoreto.github.io/bootstrap-select/examples/
【讨论】：
嵌入数据属性的HTML让我觉得很恶心。【参考方案10】：现在是 2017 年，可以针对特定的选择选项。在我的项目中，我有一个带有 class="variations" 的表格，选择选项位于表格单元格 td="value" 中，并且选择有一个 ID 选择#pa_color。 option 元素还有一个类 option="attached" （在其他类标签中）。 如果用户以批发客户身份登录，他们可以看到所有颜色选项。但是零售客户不允许购买 2 种颜色选项，所以我禁用了它们
<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>
这需要一点逻辑，但这是我针对禁用选择选项的方式。
CSS
table.variations td.value select#pa_color option.attached:disabled
display: none !important;
这样，我的颜色选项只对批发客户可见。
【讨论】：
【参考方案11】：实际上，您可以添加 :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>【讨论】：
是的，只有字体大小【参考方案12】：在这里留下一个快速的替代方案，使用表格上的类切换。该行为与选择非常相似，但可以使用过渡、过滤器和颜色来设置样式，每个子项都可以单独设置。
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>【讨论】：
我想你的意思是 [element].classList.add(name)【参考方案13】：
您可以使用内联样式将自定义样式添加到<option> 标签。
例如：<option style="font-weight:bold;color:#09C;">Option 1</option>
这只会将样式应用于这个特定的<option> 元素。
然后，您可以使用一些 javascript 魔术将内联样式应用于 <select> 标记中的所有 <option> 元素，如下所示：
var select = $(document).getElementById('#select-element-id')
var option = select.children('#option-element-id')
option.css('font-weight', 'bold')
option.css('font-size', '24px')
您还可以使用<option value="" disabled> <br> </option> 在选项之间添加换行符。
【讨论】：
【参考方案14】：此元素由操作系统呈现，而不是 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]
【讨论】：
【参考方案15】：它肯定会奏效。
选择选项由 OS 而不是 html 呈现。这就是为什么CSS样式不起作用的原因，..一般
optionfont-size : value ;
background-color:colorCode;
border-radius:value;
这会起作用，但我们不能自定义填充、边距等。
以下代码 100% 用于自定义从 this example 获取的选择标签
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>【讨论】：
点评来源： 您好，请不要只用源代码回答。尝试对您的解决方案如何工作提供一个很好的描述。请参阅：How do I write a good answer?。谢谢 此代码直接来自 w2schools w3schools.com/howto/tryit.asp?filename=tryhow_custom_select【参考方案16】：你可以添加一个类并给出 font-weight:700;在选项中。但是通过使用这个，所有的文本都会变成粗体。
【讨论】：
【参考方案17】：即使没有太多的属性可以改变，但你可以只用css来实现以下样式：
.options
border: 1px solid #e5e5e5;
padding: 10px;
select
font-size: 14px;
border: none;
width: 100%;
background: white;
<div class="options">
<select>
<option value="">Apple</option>
<option value="">Banana</option>
<option value="">Orange</option>
<option value="">Mango</option>
</select>
</div>【讨论】：
【参考方案18】：这就是你要找的吗？我用 jQuery 做到了！
运行代码片段
$(".custom-select").each(function()
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template = '<div class="' + classes + '">';
template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
template += '<div class="custom-options">';
$(this).find("option").each(function()
template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
);
template += '</div></div>';
$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
);
$(".custom-option:first-of-type").hover(function()
$(this).parents(".custom-options").addClass("option-hover");
, function()
$(this).parents(".custom-options").removeClass("option-hover");
);
$(".custom-select-trigger").on("click", function()
$('html').one('click',function()
$(".custom-select").removeClass("opened");
);
$(this).parents(".custom-select").toggleClass("opened");
event.stopPropagation();
);
$(".custom-option").on("click", function()
$(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
$(this).parents(".custom-options").find(".custom-option").removeClass("selection");
$(this).addClass("selection");
$(this).parents(".custom-select").removeClass("opened");
$(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
);body
font-family: 'Roboto', sans-serif;
.custom-select-wrapper
position: relative;
display: inline-block;
user-select: none;
.custom-select-wrapper select
display: none;
.custom-select
position: relative;
display: inline-block;
.custom-select-trigger
position: relative;
display: block;
width: 170px;
padding: 0 84px 0 22px;
font-size: 19px;
font-weight: 300;
color: #5f5f5f;
line-height: 50px;
background: #EAEAEA;
border-radius: 4px;
cursor: pointer;
margin-left:20px;
border: 1px solid #5f5f5f;
transition: all 0.3s;
.custom-select-trigger:hover
background-color: #d9d9d9;
transition: all 0.3s;
.custom-select-trigger:after
position: absolute;
display: block;
content: '';
width: 10px; height: 10px;
top: 50%; right: 25px;
margin-top: -3px;
border-bottom: 1px solid #5f5f5f;
border-right: 1px solid #5f5f5f;
transform: rotate(45deg) translateY(-50%);
transition: all 0.4s ease-in-out;
transform-origin: 50% 0;
.custom-select.opened .custom-select-trigger:after
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
.custom-options
position: absolute;
display: block;
top: 100%; left: 0; right: 0;
margin: 15px 0;
border: 1px solid #b5b5b5;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 2px 1px rgba(0,0,0,.07);
background: #fff;
transition: all 0.4s ease-in-out;
margin-left: 20px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
.custom-select.opened .custom-options
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(0);
.custom-options:before
position: absolute;
display: block;
content: '';
bottom: 100%; right: 25px;
width: 7px; height: 7px;
margin-bottom: -4px;
border-top: 1px solid #b5b5b5;
border-left: 1px solid #b5b5b5;
background: #fff;
transform: rotate(45deg);
transition: all 0.4s ease-in-out;
.option-hover:before
background: #f9f9f9;
.custom-option
position: relative;
display: block;
padding: 0 22px;
border-bottom: 1px solid #b5b5b5;
font-size: 18px;
font-weight: 600;
color: #b5b5b5;
line-height: 47px;
cursor: pointer;
transition: all 0.15s ease-in-out;
.custom-option:first-of-type
border-radius: 4px 4px 0 0;
.custom-option:last-of-type
border-bottom: 0;
border-radius: 0 0 4px 4px;
.custom-option:hover,
.custom-option.selection
background: #f2f0f0;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sources" id="sources" class="custom-select sources" placeholder="My Categories">
<option value="categoryOne">Category 1</option>
<option value="categoryTwo">Category 2</option>
<option value="categoryThree">Category 3</option>
<option value="categoryFour">Category 4</option>
</select>【讨论】：
默认选项的值是多少。 @KadenSkinner 这是占位符【参考方案19】：这是一个 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>
【讨论】：
虽然此代码可以回答问题，但提供有关 如何 和/或 为什么 解决问题的附加上下文将改善答案的长期价值。【参考方案20】：.options
border: 1px solid #e5e5e5;
padding: 10px;
select
font-size: 14px;
border: none;
width: 100%;
background: white;
<div class="options">
<select>
<option value="">Apple</option>
<option value="">Banana</option>
<option value="">Orange</option>
<option value="">Mango</option>
</select>
</div>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>【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。以上是关于如何为 html“选择”元素的选项设置样式？的主要内容，如果未能解决你的问题，请参考以下文章
在定义自定义选项组件时，如何为react-select应用默认样式？