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

标签 javascript jquery html

<分区>

如何添加 <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>

最佳答案

2019 年更新

此解决方案不再有效。

检查了最新的 Chrome、Firefox 和 Safari。


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

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

...

更新

要有不同颜色的点

HTML

<select>
    <option> select </option>
    <option class="red"> one </option>
    <option class="green"> two </option>
    <option class="blue"> three </option>
</select>

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

DEMO

关于javascript - 是否可以在 <option> 标签内添加 <div> 或 <span> ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11890597/

相关文章:

javascript - 创建对象的两种方法,不确定有什么区别或使用哪一种

javascript - Fancytree 渲染所有元素

javascript - 如何使 j-query 照片库 slider 与重复 slider 配合得很好?

javascript - 提交表单并重定向到 PHP 和链接

html - CSS如何高度步长箭头

jquery - 覆盖背景图片和jquery局部滚动

javascript - 尝试在不直接评估元素的情况下测试元素是否具有属性

javascript - 动态 url 作为 css 和 D3JS 中伪元素的数据属性

javascript - 在 Canvas JQuery 中保存多个图像

firefox - 关于 HTML 5 中的地理定位