Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add span inside <option> tag and style it

I would like to add span before text inside <option> tag and style it (it should represent color in select menu). However it does't seem to work...

How to make this piece of code working?

JsFiddle: http://jsfiddle.net/bartuz/08e0L9j2/2/

It seems example above does work in Firefox only... what about other browsers?

like image 662
Filip Bartuzi Avatar asked Aug 08 '14 08:08

Filip Bartuzi


People also ask

Can we use span inside option?

So depending on context there are two things that you can put inside an <option> — text or nothing at all — you may not put a <span> or any other element there. An option element cannot have any child elements. So yes, it is bad.

How do you add a style to a span tag?

How to style text with the span tag. If you want to makes some particular text or any other content different from the rest, you can wrap it in a span tag, give it a class attribute, then select it with the attribute value for styling.

Can you put a span tag inside an a tag?

Curious to know if the following is semantically correct…to have a <br /> tag and <span> inside a list? Yes, absolutely fine. An <li> can contain either block-level or inline elements.

Which tag we can use inside span?

<span>: The Content Span element It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.


1 Answers

This will depend on your web browser. In the latest version of Firefox, it works fine. However, it doesn't work in the latest version of Internet Explorer.

Your question is a bit loaded - and I suspect that's why it got downvoted - you are asking why it's not working, rather than how to get it to work.

It's not working because it's not really a supported feature of selectboxes (yet!)

I'd suggest you look into using JavaScript to achieve the same result (and specifically, the jQuery UI selectmenu) which should support this type of 'advanced' select box.

like image 168
Alastair Campbell Avatar answered Sep 21 '22 01:09

Alastair Campbell