# Set perspective table checkbox color

**URL:** <https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 17, 2020, 4:19pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617 "2020-12-17T16:19:27Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![ShaneH](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@ShaneH](https://forum.inductiveautomation.com/u/ShaneH)\
**Post date:** [December 17, 2020, 4:19pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/1 "2020-12-17T16:19:28Z")

</div>

Using Perspective 8.1, I have a table column with ‘render’ set to ‘boolean’, and ‘boolean’ set to ‘checkbox’.

How do I control the color used for the checkbox? I’ve tried setting various ‘styles’ for the column (color, fill, stroke, etc.) but none seem to have an effect.

Thanks.  
-Shane

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [December 17, 2020, 5:28pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/2 "2020-12-17T17:28:02Z")

</div>

In _theory_ you could supply a targeted CSS rule to target only the checkboxes in the table. Something like this in a custom theme _should_ work - but I haven’t tested this exact code:

```auto
.ia_tableComponent[data-component="ia.display.table"] .ia_checkbox__checkedIcon {
    color: #00FF00
}
.ia_tableComponent[data-component="ia.display.table"] .ia_checkbox__uncheckedIcon {
    color: #FF0000
}

```

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 17, 2020, 5:32pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/3 "2020-12-17T17:32:00Z")

</div>

Note that you’ll need to apply that in a [theme](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes) - you can’t just apply it via props on the table component directly.

---

<div class="post-metadata">

**Author:** ![ShaneH](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@ShaneH](https://forum.inductiveautomation.com/u/ShaneH)\
**Post date:** [December 17, 2020, 6:50pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/4 "2020-12-17T18:50:15Z")

</div>

thank you. that worked.

---

<div class="post-metadata">

**Author:** ![wbaker](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wbaker/32/85315_2.png) [@wbaker](https://forum.inductiveautomation.com/u/wbaker)\
**Post date:** [May 28, 2021, 6:53pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/5 "2021-05-28T18:53:15Z")

</div>

Hi, are there any updates to this? Could the checkbox change color like we can modify the toggle switch?  
When toggle is selected, the ‘toggleSwitch’ object appears, but we don’t get this with the CheckBox.  
 ![Snag_294fd0b1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/2/b21c9c3303fd688ec9bd0a91527d70e18b5ba5f3.png)

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [May 29, 2021, 1:34am UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/6 "2021-05-29T01:34:21Z")

</div>

Broken “theme” link

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [May 29, 2021, 2:32pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/7 "2021-05-29T14:32:01Z")

</div>

Repaired.

---

<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:** [June 18, 2023, 10:15pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/8 "2023-06-18T22:15:19Z")

</div>

And since 8.1.?? (around 20?) this can be added instead into the Advanced Stylesheet (stylesheet.css) via right-clicking on Perspective | Styles | Advanced Stylesheet.  
Here I've modified it to use built-in theme colors.

> [@](#):
>
> ```auto
> .ia_tableComponent[data-component="ia.display.table"] .ia_checkbox__checkedIcon {
> color: var(--neutral-70);
> }
> .ia_tableComponent[data-component="ia.display.table"] .ia_checkbox__uncheckedIcon {
> color: var(--neutral-70);
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![James\_Caudle](https://avatars.discourse-cdn.com/v4/letter/j/5f9b8f/32.png) [@James\_Caudle](https://forum.inductiveautomation.com/u/James_Caudle)\
**Post date:** [September 21, 2023, 5:23pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/9 "2023-09-21T17:23:16Z")

</div>

On 8.1.28 I have not figured out how to use the stylesheet.css to change the color of the regular checkbox component. The ".ia\_tableComponent[data-component="ia.display.table"] .ia\_checkbox\_\_checkedIcon" class will update the color for a checkbox inside a table but is not working on the regular component. Anyone else see this? or know a work around?

---

<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:** [September 21, 2023, 5:35pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/10 "2023-09-21T17:35:01Z")

</div>

If you check using your browser's development tools you'll see,

```css
.ia_checkbox .ia_checkbox __checkedIcon, .ia_checkbox .ia_checkbox__ indeterminateIcon {
    color: var(--checkbox--checked);
}

```

I think the important bit here is that the color is determined by a CSS var.  
Scroll down to the bottom of the style window and you'll find the var definition under `:root`.

Try adding this to your advanced stylesheet:

```css
:root {
	--checkbox--checked: green;
}

```

If that works you should be able to figure it out from there.

I'm still figuring out this stuff.

---

<div class="post-metadata">

**Author:** ![James\_Caudle](https://avatars.discourse-cdn.com/v4/letter/j/5f9b8f/32.png) [@James\_Caudle](https://forum.inductiveautomation.com/u/James_Caudle)\
**Post date:** [October 2, 2023, 5:20pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/11 "2023-10-02T17:20:07Z")

</div>

> [@Transistor](#):
>
> ```auto
> :root {
> --checkbox--checked: green;
> }
> 
> ```

Nice! thanks for the reply. Worked.

---

<div class="post-metadata">

**Author:** ![Paulo\_Custodio](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paulo_custodio/32/56599_2.png) [@Paulo\_Custodio](https://forum.inductiveautomation.com/u/Paulo_Custodio)\
**Post date:** [December 26, 2025, 5:11pm UTC](https://forum.inductiveautomation.com/t/set-perspective-table-checkbox-color/41617/12 "2025-12-26T17:11:39Z")

</div>

This may help someone else later.

I tried the solutions above, and none of them worked for me (using version 8.1.48).

Since the checkbox is a SVG I added the following to the css advanced stylesheet and it worked:

/\* Checked checkbox \*/  
.ia\_tableComponent .ia\_checkbox\_\_checkedIcon {  
fill: var(--neutral-100);  
}

/\* Unchecked checkbox \*/  
.ia\_tableComponent .ia\_checkbox\_\_uncheckedIcon {  
fill: var(--neutral-100);  
}