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

问题描述

如何在<$ c $>内添加< div> 或< span> c>< option> tag？

我希望这行是< 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> 
  

解决方案

可以在文字后加一个红色圆圈 -

 选项：after {
 content：; 
 height：5px; 
 width：5px; 
背景：＃c00; 
 border-radius：5px; 
 display：inline-block; 
 
  

...

更新

要有不同的颜色点

HTML

 < select> 
< option>选择< / option> 
< option class =red>一个< / option> 
< option class =green>两个< / option> 
< option class =blue>三个< / option> 
< / select> 
  

CSS

 选项：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; } 
  

how can i add <div> or a <span> tag inside an <option> tag?

I want the row to be <option> of course it has a value and everything, but I need to put a circle red color next to the text in that option, is that possible?

code like:

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

解决方案

It is possible to put a red circle after the text - http://jsfiddle.net/V8cvQ/

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

...

UPDATE

To have different color dots

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

这篇关于是否可以添加&lt; div&gt;或&lt; span&gt;在&lt; option&gt;内部标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！