How can I change the colour of Dropdown List items in runtime?

I need to be able to change the colour of individual dropdown list items. I’ve noticed that this can be done in the editor by directly modifying the value of the item’s colours while the dropdown list is open:

alt text

However, this only works for as long as the dropdown list is open. If you close and re-open the list, the colours will reset to default. Furthermore, since my dropdown lists are created during runtime, they need to have their colours assigned during runtime too.

One way I thought I could accomplish this would be to have a listener that would trigger whenever the dropdown list was selected, whereupon I could just find the relevant list items and change them that way. However, the only listener I could find that related to dropdowns is the ‘OnValueChanged’ one, which only triggers once one of the list items has been selected (by which point it’s too late).

Is there any way to either add a listener to the dropdown list that activates whenever it’s opened, or to just edit the colour of individual dropdown options upon creation? Any help would be appreciated!

The best way really would be to make your own dropdown.

Fortunately, Unity is kind enough to share the UI code. You can find the dropdown code here:

https://bitbucket.org/Unity-Technologies/ui/src/0651862509331da4e85f519de88c99d0529493a5/UnityEngine.UI/UI/Core/Dropdown.cs?at=2018.3%2Fstaging&fileviewer=file-view-default

Use that to make your own dropdown class and modify the Show() method.

I extended the existing control rather than re-writing it. It’s just a different approach.

You can achieve this by simply adding a component to your template’s item.
Under the GameObject named Template, you wil find an GameObject named Item. It is duplicated each time an item of the dropdown list is created.

You can add something like the code below to the Item GameObject. In the editor, simply drop the Image component from the Item Background GameObject to the field Image (or find it via code, depending on your needs).

Then, each time the template’s item will be duplicated, the ColorChanger component will be created and started.

public class ColorChanger : MonoBehaviour
{
    [SerializeField] Image _image;
    void Start()
    {
        _image.color = Color.red;
    }
}

This is just to give the idea, explore and customize to your needs :wink: (here I did not do the filtering to show how to highlight a single item, but this should be easy)

I believe my solution will help. If I understand correctly, you want to set a background color for the selected item in the drop down? I don’t have the code to set this all up, but this is how I did it through the Inspector.

Under Viewport-Content-Item: I use the “Item Checkmark” as a way to color the row.
Set the Item Checkmark’s Rect Transform to Strech both directions. Left/Right/Top?Bottom to 0
Set the Item Checkmark’s Color to whatever color you like, then set the Alpha to allow the text to be seen through the Checkmark’s color.

This should highlight the selected item using the Checkmark Item, which the DropDown sets for you. Hope this helps.

As @WarmedxMints said, it’s probably the best to make your own dropdown.
I’ve created one, which fits my usage.

Maybe it helps:

its actually just

dropdown.targetGraphic.color = color;