Question

在没有javascript的<option>之后，有没有简单的方法来标记<select>标记？我试图在其中添加类或其他标记。

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

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

Answer 1

如果不是javascript，如果不是不可能，则非常难，我会创建一个自定义select元素，我希望能帮到你。

＆＃13;

$(document).ready(function(){
    $('.sel>span').click(function(){
        $('.sub').toggle();
    })

    $('.sub div').click(function(){
        $('.sel .content').text($(this).text());
        $('.sub').hide();
    })
})

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

构建自己的下拉列表比尝试设置现有下拉列表更容易。

看一下Bootstrap或这些链接：

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

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

或者就此而言使用Google

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

2 个答案: