Search results in dropdown menus

[mkonik]

When any filter is selected, the relevant results in other dropdown menus should be highlighted. For example when "15xx" century is selected, there are two libraries that have relevant holdings: "PL-STAb (8)" and "PL-Wn (147)". It should be highlighted with e.g. #a71b1d color. It should work for other menus.

[craigsapp]

I made this behavior for the century menu (firefox):

Styling select menus is poorly supported in web browsers (it was original left to the operating system to render them so that there was a uniform style for the operating system).

In Chrome the same does not work:

In Safari it does not work:

Typically a javascript library is used to replace the form displays with other HTML elements, which in turn allows more styling of the select menu (I have already tried changing the font size with CSS, but it will not change).

[craigsapp]

See

• https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element
• https://speckyboy.com/open-source-css-javascript-select-box-snippets

[craigsapp]

One possibility:

https://github.com/patrickkunka/easydropdown
https://demos.kunkalabs.com/easydropdown

"Ivy" style is similar to forms on other NIFC-related websites:

[craigsapp]

https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements

A lot of articles have been written about [select menus] and, even in 2020, it’s still a challenge to create custom selects and some users still prefer the simple native ones.

[craigsapp]

Commit eaf47ca adds some styling improvements to the browse search fields:

• Make the font size of drop-down menus larger to match size of text-search boxes
• Add background color to drop-down menus to make the form easier to read and differentiate style compared to text-entry fields.
• Added rounded corners partially to match the style of forms on PMP and to also make them visually more separate
• Added extra space between forms to improve visibility (and maybe will be easier to use with a finger on a tablet interface).
• Centered selected text in drop-down menu.
• The page title was made a little larger and a blur to emphasize it more was added.

Example of new forms:

Verbose form:

[craigsapp]

Google Chrome in Linux (but not OSX) allows coloring of the selection options:

Subissue: figure out why the options are highlighted in red and make it instead black or gray.

In Linux Firefox, the background of the select menu is white for the same page: