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

Question

在 <select> 之后没有 javascript 的情况下，是否有任何简单的方法来设置 <option> 标签的样式？我试图在其中添加 class 或其他标签。

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

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

Answer 1

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

查看 Bootstrap 或这些链接：

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

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

或者就此使用 Google

Answer 2

Without javascript if not be impossible else is very hard , i create a custom select element, I hope help you.

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

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

How do i style <option> tag without JavaScript?

html

css

option