# How to change colors of a dropdown box

**URL:** <https://forum.inductiveautomation.com/t/how-to-change-colors-of-a-dropdown-box/89110>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 19, 2024, 1:07pm UTC](https://forum.inductiveautomation.com/t/how-to-change-colors-of-a-dropdown-box/89110 "2024-04-19T13:07:53Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 19, 2024, 2:36pm UTC](https://forum.inductiveautomation.com/t/how-to-change-colors-of-a-dropdown-box/89110/2 "2024-04-19T14:36:29Z")

</div>

![CallToAction](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/2/f2b9936754ec9c302abb6e4c6c1dbeb3fbd053be.png)

Use your browser's Developer Tools (F12), hit the inspect button, click on your dropdown (expand it before using the inspect button) and examine the CSS. You'll see that it's using `var(--callToAction--hover)` which means that it's using the built-in themes.

> **[Perspective Built-In Themes | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/perspective-built-in-themes#built-in-theme-colors)**
>
> Themes

For consistency in your app you should override these variables in the Project Browser | Perspective | Styles | right-click Advanced (I think) and then edit stylesheet.css.

Try adding this:

```auto
:root {
	--callToAction--hover: #00cc00;
	--callToAction--activeAlt: #dbe540;
}

```

Developer Tools should give you a list of all the theme variables on the bottom right and you may need to expand it. Click on a color and edit to find the settings you want and add those to your stylesheet.css overrides.

> **[Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)**
>
> Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using the @property at-rule or by custom property...

---

_[View the full topic](https://forum.inductiveautomation.com/t/how-to-change-colors-of-a-dropdown-box/89110)._