is it possible to add <div> or <span> inside an <option> tag? [duplicate]

Question

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> 

Answer 1

2019 UPDATE

This solution doesn't work anymore.

Checked in latest Chrome, Firefox and Safari.

---

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

Answer 2

No. According to MDN, this is what is allowed:

Permitted content: Text with eventually escaped characters (like é)