What is the proper way to Override text color of list elements in the gradio.Dropdown component?

[x-CK-x]

Describe the bug

using the _js event listener option, I was unable to set the color of text in the

elements for the dropdown menu. I have no idea what I'm doing wrong with this:

elem_id="required_dropdown" for the specified dropdown menu and then for the event listener option _js I used the following:

js_set_colors_on_list_required = """
        async () => {
          const dropdown = document.querySelector("#required_dropdown");
          const ulElements = dropdown.querySelectorAll("ul");

          for(let ul of ulElements) {
            let liElements = ul.querySelectorAll("li");
            // If there are <li> elements, we add the class
            liElements.forEach(li => {
              li.style.color = "red"
            });
          }
        }
        """

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

firstly, set the
elem_id="required_dropdown" for the specified dropdown menu and then for the event listener option _js I used the following:

js_set_colors_on_list_required = """
        async () => {
          const dropdown = document.querySelector("#required_dropdown");
          const ulElements = dropdown.querySelectorAll("ul");

          for(let ul of ulElements) {
            let liElements = ul.querySelectorAll("li");
            // If there are <li> elements, we add the class
            liElements.forEach(li => {
              li.style.color = "red"
            });
          }
        }
        """

Screenshot

No response

Logs

No response

System Info

gradio 3.36.1
Windows 10

Severity

Blocking usage of gradio

[abidlabs]

Hi @x-CK-x if you are trying to style a specific gr.Dropdown(), you can use elem_classes and custom css. Read more about that process here, including the caveat mentioned at the top: https://www.gradio.app/guides/custom-CSS-and-JS

In your case, you could do something like this:

import gradio as gr

css = """
.required-dropdown li{
  color: red
}
"""

with gr.Blocks(css=css) as demo:
    gr.Dropdown(label="Regular Dropdown", choices=["America", "Azerbaijan", "Bahrain"])
    gr.Dropdown(label="Required Dropdown", choices=["America", "Azerbaijan", "Bahrain"], elem_classes=["required-dropdown"])               
    
demo.launch()

which produces this:

[x-CK-x]

Hi @abidlabs and thank you so much for getting back to me on this matter!
Is there an extension of how I could apply separate colors to different elements of the list?

My application of this is having a set number of colors pertaining to different categories to which the tags presented in the dropdown menu would show as the respective category color.

[abidlabs]

Not possible as far as I can tell, unless you can think of some css selector queries to accomplish it. I'd say that's outside the scope of the gr.Dropdown() component.

We are working on custom components which should make it possible for users to create extensions to existing components for this kind of thing.

[MAProcessing]

Hi @abidlabs, does the dropdown support changing the color of elements after they've been selected by a user? If not, can we achieve this with js and if so how? Thanks!

[jun-sun-9527]

@x-CK-x @abidlabs This may achieved by the following:

import gradio as gr

css = """
.required-dropdown .item[aria-label="America"] {
    background-color: #800080;
    color: white;
}
.required-dropdown .item[aria-label="Azerbaijan"] {
    background-color: #ff0000;
    color: white;
}
.required-dropdown .item[aria-label="Bahrain"] {
    background-color: #c0c0c0;
    color: black;
}
"""

with gr.Blocks(css=css) as demo:
    gr.Dropdown(label="Regular Dropdown", choices=["America", "Azerbaijan", "Bahrain"])
    gr.Dropdown(label="Required Dropdown", choices=["America", "Azerbaijan", "Bahrain"],
                elem_classes=["required-dropdown"])

demo.launch()

which produces this: