是否可以在<option>标签内添加<div>或<span>?

Abu*_*ude 26 html javascript jquery html5

我如何<div><span>标签内添加<option>标签?

我希望行<option>当然有一个值和一切,但我需要在该选项的文本旁边放一个圆红色,这可能吗?

代码如:

<option value="1">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="2">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="3">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="4">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
Run Code Online (Sandbox Code Playgroud)

Zol*_*oth 20

文本后面可以放一个红圈 - http://jsfiddle.net/V8cvQ/

option:after {
    content: " ";
    height: 5px;
    width: 5px;
    background: #c00;
    border-radius: 5px;
    display: inline-block;
}
Run Code Online (Sandbox Code Playgroud)

...

UPDATE

有不同的颜色点

HTML

<select>
    <option> select </option>
    <option class="red"> one </option>
    <option class="green"> two </option>
    <option class="blue"> three </option>
</select>
Run Code Online (Sandbox Code Playgroud)

CSS

option:after {
    content: " ";
    height: 5px;
    width: 5px;
    border-radius: 5px;
    display: inline-block;
}

option.red:after { background: #c00; }
option.green:after { background: #0c0; }
option.blue:after { background: #00c; }
Run Code Online (Sandbox Code Playgroud)

DEMO

  • @ZoltanToth非常感谢,但你的代码不适用于chrome或IE> 7.0,你可以在jsfiddle上测试 (7认同)
  • 在2019年不工作 (4认同)

Dav*_*ave 19

不.根据MDN,这是允许的:

允许的内容:带有最终转义字符的文本(如&eacute;)


j08*_*691 5

不,不可能.或者至少无效.