Customize unity UI controls (checkbox) with USS

Unity Engine
1

Hello! I’ve tried my best to search for an answer, but coming up short. Would really appreciate if anyone can point me in the right direction!

I would like to customize the default Toggle (checkbox) control that is provided in UI Toolkit. My goal would be to change the size of the check box element, and insert a custom checkmark graphic in place of the default.

In looking at the docs, Unity mentions the checkmark itself is an image, but isn’t clear on how to replace/swap that image, or if it’s even possible. I have experimented with the :checked pseudo class, but it doesn’t seem to always work 100% depending on what property you use. For example, I can set a background-color property to the checkmark element (and that works) but setting a background-color property on the :checked pseudo class of that same element does not do anything.

Any help would be appreciated! Thank you

2

Update! I solved it (at least for my case). Posting answer here in case anyone stumbles on this and needs it. This would be an example of overriding the default checkboxes.

Toggle:checked .unity-toggle__checkmark {
    background-image: url('path/to/image.png');
}

I had been trying to use .unity-toggle__checkmark:checked, but that’s the wrong selector. What is actually happening is that you are ‘checking’ the parent item Toggle, and applying the background image on the child element. Makes sense, just hard to find anything that explicitly states this in the docs

6 Likes
3

I’m stucked with that… Could you help me a bit by discord?

4

Thanks for this tip,
For me, I had to remove the “.png” at the end of the path or Unity shows me a warning icon instead of mine. I used resources() instead of url() btw