Is it possible for the options of an HTML select element to include HTML tags?

For example, given the following code:

    <option value="one"><b>one is bold</b></option>
    <option value="two">two has some <span style='color:red;'>red</span> text</option>
    <option value="three">three is just normal</option>

I would like the options to actually render in HTML. In this application I can play with HTML, CSS, JavaScript (including jQuery). And the HTML itself is being rendered via Django (

Solution 1

No, you can't do this. <option> tags cannot contain any other tags.

Solution 2

No, but this: Styling HTML Select may help you and there a lof of detail and votes here:

How to style a <select> dropdown with CSS only without JavaScript?

Solution 3

No, you cannot.

What you would do if you wanted this is use something like a floating div and position and display it using Css to look like a select. Then using javascipt clicks allow users to select.

Something like this: Reinventing the dropdown

Solution 4

option tag does not allow any children other than text

Here is a fiddle I created a few months ago that replaces a select element with a list dropdown, and updates the select for each selection made. Just hide select with css

The user in this thread then turned it into a plugin available on github( see link in thread)

Custom drop-down panel with jQuery