[web] Examples are not highlighted with colors in Firefox about playground HOT 8 CLOSED

Which version of firefox are you using?
I have just checked with firefox 79.0 (64-bit) under windows and it works normal.

from playground.

With Firefox 76.0.1 (64-bit) under Ubuntu I can see the problem

from playground.

Could be more difficult to solve then I expected...
https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling

from playground.

I am using 79.0 (64-bit) under Linux

from playground.

Given that it is a bigger problem, what about putting a small square filled with the intended color to the left of the text? Or any other method :)

from playground.

Unfortunately this is also not possible from what I found. I guess options would be:

1. Add (valid), ... text after the example name. With a little more effort we could also do it only for Browser/OS combinations where the problem occurs (from what I have read, this could apply also for other browsers since it is not covered of W3C specs yet.)
2. Rebuild the dropdown functionality, which would be probably most effort, but add not to much stuff and enable coloring.
3. Using a framework (like Bootstrap but not only CSS) or a utility which only implements a custom dropdown. Would be not to much effort, but add unnecessary stuff or not be sure how sophisticated it works.

Any thoughts? :)

from playground.

I think the first option is the easiest and most user friendly in terms of being the most "communicative". This would be the behavior for all browsers though (makes it even easier).

from playground.

Deployed!

from playground.