# 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:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![matt\_Kerg](https://avatars.discourse-cdn.com/v4/letter/m/ecb155/32.png) [@matt\_Kerg](https://forum.inductiveautomation.com/u/matt_Kerg)\
**Post date:** [April 19, 2024, 1:07pm UTC](https://forum.inductiveautomation.com/t/how-to-change-colors-of-a-dropdown-box/89110/1 "2024-04-19T13:07:53Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/88c87ced836a08e098c3e71ab590a5dd49d9be6e.png)

I have tried just about all the elements in the style menu and can modify the background etc but I can not change the dark and light blue default selection and hover in the dropdown box itself. Any help would be appreciated.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/0/c089fc994e02c64fc84a9273a42e0240e8feee6d.png)

---

<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...

---

<div class="post-metadata">

**Author:** ![matt\_Kerg](https://avatars.discourse-cdn.com/v4/letter/m/ecb155/32.png) [@matt\_Kerg](https://forum.inductiveautomation.com/u/matt_Kerg)\
**Post date:** [April 19, 2024, 6:04pm UTC](https://forum.inductiveautomation.com/t/how-to-change-colors-of-a-dropdown-box/89110/3 "2024-04-19T18:04:24Z")

</div>

So I added the line that you suggested in the CSS file and the hover color is still blue.

```python
[data-component="ia.chart.simple-gauge"] g > text {
    text-anchor: middle;
    font-size: 15px; /* Default font size for the text */
    dominant-baseline: middle; /* Center-align vertically */
}
 
[data-component="ia.chart.simple-gauge"] g > text:first-child {
    font-size: 150%; /* 150% font size for the "%" symbol */
}
:root{
		--callToAction--hover: --neutral-50
}

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/77b4bfe4d6637640dfbcd83fa8904dc29119132c.png)

neutral 50 should be grey correct? or did I do something wrong.

Nevermind I forgot to wrap with var(--neutral-50);

Thanks for your help