Bug 9599 – native <select size=1> control should allow icons in the menu

• Status: NEW
• Component: Forms

[Timothy Hatcher]

The new select control should allow icons to be added to the popup menu. This would allow for more rich content and let developers leverage this control more.

This could be expressed in CSS like:

option:before {
     content: url(myCoolIcon.png);
}

I could use this in Drosera to make the function and file popup have icons like Xcode.

[Timothy Hatcher]

See bug 9600 for a more complex request to allow font styles in the menu.

[Dave Hyatt]

I think there's a CSS3 ::icon pseudo.

[Aaron Rosenzweig]

Created attachment 16031 [details]
Reduction to show images and styled fonts on select box widgets

This reduction works in Firefox but does not work in Safari 3.0.3 (2nd v3 beta). "Browser" widgets should be able to have their fonts colored, styled (bold, italics), and also allow more general compliance with CSS such as the use of images. This reduction shows all these features working in Firefox but not in Safari. When I say "Browser" I'm using WebObjects lingo but I mean the "select" tag with embedded "option" tags. Some people call this a popup, or dropdown, but it can also have a fixed size and show more than one option at a time with a scroll bar.  From what I can tell, the only styling we can do on "browser" widgets in Safari is just coloring the text.

[Wim Leers]

dhyatt explained me in IRC (http://drupal.org/node/180691#comment-1044691) that this will not be supported until WebKit stops using native Mac OS X menus.
Firefox draws the widgets itself, which allows it to support this.

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.5 on macOS 12.4, I changed attached test case in following JSFiddle:

Link - https://jsfiddle.net/enh5oz9f/show

NOTE - I use free image hosting solution, if in future "PNG" picture get deleted or gone then just update URL in HTML and CSS to new PNG and it will work.

All other browser renders "tick mark" png next to options.

Thanks!