HTML Select Option, text formatting

Question

Do any of the modern browsers support any type (any type at all) of internal text formatting (so that part of a single option is formatting differentially). Different side, colour, strength, subscript, anything.

So far it seems that Chrome, at least, just deletes any tags put inside of option tags.

I am looking for something to accomplish this style of result (without having to deal with canvases):

<option value="8470621">Corey Perry <i>Anaheim Mighty Ducks</i></option>

OR

<option value="8474141"><b>Patrick Kane</b> Chicago Blackhawks</option>

Answer 1

There is currently no support for nested HTML tags within options. The closest formatting element you can use is <optgroup> which will group options into sections.

What you could do is use a javascript replacement like Select2 or Chosen to style the elements. It isn't native, but it does support HTML.

Answer 2

As the specification "4.10.12 The option element" states is the content model of an <option>-element text only.

Answer 3

The answer is no.

As you can see on MDN:

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

There are alternatives combining other tags, but not select and option.

---

For further reading:

• Select boxes with HTML inside each option.

• jQuery .customSelect()

• A custom select for @twitter bootstrap using button dropdown.

Answer 4

I found this method to overlay text in list, but it probably will not help with :)

var result ="";
$.each(text.split(""), function () {
result += this + "\u20EB";
});