javascript - Add span inside <option> tag and style it - Stack Overflow

admin管理员组

文章数量:1290953

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: /

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

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/bartuz/08e0L9j2/2/

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

• javascript
• html
• css
• google-chrome

Share Improve this question Follow edited Apr 5, 2018 at 12:04 Filip Bartuzi asked Aug 8, 2014 at 8:31 Filip BartuziFilip Bartuzi 5,93188 gold badges5858 silver badges105105 bronze badges 7

• Even though this is not allowed, I can see some colored boxes in my Firefox 30.0 - so what exactly is not working?! – chm-software. Commented Aug 8, 2014 at 8:35
• In chrome in doesn't... – Filip Bartuzi Commented Aug 8, 2014 at 8:37
• The fiddle linked works exactly as you say you describe -- there's a colored box, then the text. It's not valid HTML though, so it may not be consistent across browsers – blgt Commented Aug 8, 2014 at 8:38
• jsfiddle/kheema/08e0L9j2/3 is this what you want? – Kheema Pandey Commented Aug 8, 2014 at 8:38
• it doesn't work in chrome @KheemaPandey – Filip Bartuzi Commented Aug 8, 2014 at 8:38

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

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.

An option element isn't allowed to have child elements. I've extended your same answer, but instead applied the background color to the option element as demonstrated in this jsfiddle link: https://jsfiddle/go4zee/6L0jjjoa/

$('#tag_item_color option').each(function () {
    var color = $(this).text();
    console.log(color);
    $(this).closest("option").css({"background-color":color});

})

You shouldn't rely on the fact that your hack works on Firefox, does not mean it should on Chrome too.

Anyway, styling selects was always frustrating and there's no easy way to customize native select elements.

If you're looking for a way to style the native select elements, maybe this will help:
https://catalin.red/making-html-dropdowns-not-suck/

本文标签： javascriptAdd span inside ltoptiongt tag and style itStack Overflow