Question

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

返回：

Swedish Cars
  Volvo
  Saab
German Cars
  Mercedes
  Audi

这没关系，但我想在沃尔沃，萨博，梅赛德斯和奥迪自己的前缀之前添加，例如“＆gt;”并删除这样的空白区域：

 Swedish Cars
 >Volvo
 >Saab 
 German Cars
 >Mercedes
 >Audi

这可能吗？如果是，怎么样？

Answer 1

据我所知，这是不可能的。 Css样式不适用于它们，并且没有选项可以执行此操作。

你能做的是：

仅使用option代码并手动或使用javascript添加>。
制作自定义下拉菜单，例如here。

Answer 2

当然可以在javascript中使用。

这样做：

var myArr = document.querySelectorAll('optgroup > option');
for(var i=0;i<myArr.length;i++){
  myArr[i].textContent = ">"+ myArr[i].textContent;
}

Answer 3

是的，可以在纯CSS中创建一个css类.opt并在您想要的<option>标签上使用它：

<强> DEMO HERE

<强> CSS：

.opt {
    padding: 0;
}
.opt:before {
    content:">";
}

<强> HTML：

<select>
    <optgroup label="Swedish Cars">
        <option value="volvo" class="opt">Volvo</option>
        <option value="saab" class="opt">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
        <option value="mercedes" class="opt">Mercedes</option>
        <option value="audi" class="opt">Audi</option>
    </optgroup>
</select>

添加前缀并删除＆＃39;选项＆＃39; in＆＃39; optgroup＆＃39;

3 个答案: