我如何在没有 JavaScript 的情况下设置 <option> 标签的样式？答案

【问题标题】：How do i style <option> tag without JavaScript?我如何在没有 JavaScript 的情况下设置 <option> 标签的样式？
【发布时间】：2017-06-26 00:29:39
【问题描述】：

在<select> 之后，有没有简单的方法来设置<option> 标签的样式而不使用javascript？我试图在其中添加类或其他标签。

<option><span>&nbsp;</span><option> OR
<option><lable class="padding">&nbsp;</lable><option>

它不显示任何标签。我正在尝试为选项文本添加一些填充。请提出建议。

【问题讨论】：

遗憾的是，这并不容易。我通常使用一些下拉替换，你可以写普通的<select>-boxes。
stackoverflow.com/questions/8430279/…
你没有。使用类似select2.github.io
不要。不是每个人都使用相同类型的输入。选择框的外观不取决于您，取决于浏览器。你的职责以一些关于大小、字体和颜色的基本 CSS 建议结束。也不要认为您可以摆脱自定义实现（如建议的 Select2）。这些都是垃圾，一旦有人使用替代输入设备，它们就会很快崩溃。（顺便说一句，移动浏览器尤其会覆盖这些东西。）不要这样做。
How to style a <select> dropdown with CSS only without JavaScript?的可能重复

标签： html css option

【解决方案1】：

没有javascript如果不是不可能，否则很难，我创建了一个自定义select元素，希望对你有所帮助。

$(document).ready(function(){
    $('.sel>span').click(function(){
        $('.sub').toggle();
    })

    $('.sub div').click(function(){
        $('.sel .content').text($(this).text());
        $('.sub').hide();
    })
})

.sel {
    display: inline-block;
    width: 200px;
    height: 20px;
    border: 1px solid #ccc;
    position: relative;
    padding-left: 40px;
    box-sizing: border-box;
}

.sel > .arrow{
    position: absolute;
    right: 0;
    cursor: pointer;
    outline: none;
}

.sub {
    position: absolute;
    border: 1px solid #ccc;
    display: inline-block;
    width: 200px;
    left: -1px;
    top: 19px;
    box-sizing: border-box;
    display: none;
    cursor: pointer;
}

.content {
    color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="sel">
  <span class="arrow">&#9662;</span>
  <span class="content"></span>
  <div class="sub">
    <div>&nbsp;</div>
    <div>Orange</div>
    <div>Blue</div>
    <div>Red</div>
  </div>
</div>

【讨论】：

【解决方案2】：

构建自己的下拉菜单比尝试设置现有下拉菜单的样式更容易。

看看 Bootstrap 或这些链接：

https://semantic-ui.com/modules/dropdown.html#/examples

https://tympanus.net/Tutorials/CustomDropDownListStyling/index3.html

或者使用谷歌来解决这个问题

【讨论】：