Bug 9599 - native <select size=1> control should allow icons in the menu
Summary: native <select size=1> control should allow icons in the menu
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: 420+
Hardware: Mac OS X 10.4
: P3 Enhancement
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2006-06-26 04:40 PDT by Timothy Hatcher
Modified: 2022-06-24 17:15 PDT (History)
8 users (show)

See Also:


Attachments
Reduction to show images and styled fonts on select box widgets (5.05 KB, application/octet-stream)
2007-08-20 06:51 PDT, Aaron Rosenzweig
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Timothy Hatcher 2006-06-26 04:40:57 PDT
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.
Comment 1 Timothy Hatcher 2006-06-26 04:50:32 PDT
See bug 9600 for a more complex request to allow font styles in the menu.
Comment 2 Dave Hyatt 2006-06-26 11:55:43 PDT
I think there's a CSS3 ::icon pseudo.
Comment 3 Aaron Rosenzweig 2007-08-20 06:51:33 PDT
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.
Comment 4 Wim Leers 2008-10-05 15:29:34 PDT
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.
Comment 5 Ahmad Saleem 2022-06-24 09:53:46 PDT
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!