is it possible to add <div> or <span> inside an <option> tag?
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
No. According to MDN, this is what is allowed:
Permitted content: Text with eventually escaped characters (like
é
)
Nope, not possible. Or not valid at least.