# Perspective table disable row highlight on click

**URL:** <https://forum.inductiveautomation.com/t/perspective-table-disable-row-highlight-on-click/50995>\
**Category:** Ignition\
**Created:** [September 15, 2021, 1:30pm UTC](https://forum.inductiveautomation.com/t/perspective-table-disable-row-highlight-on-click/50995 "2021-09-15T13:30:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![gfeiten](https://avatars.discourse-cdn.com/v4/letter/g/cdc98d/32.png) [@gfeiten](https://forum.inductiveautomation.com/u/gfeiten)\
**Post date:** [September 15, 2021, 1:30pm UTC](https://forum.inductiveautomation.com/t/perspective-table-disable-row-highlight-on-click/50995/1 "2021-09-15T13:30:31Z")

</div>

Running Ignition version 8.06.

I would like to disable the feature that a row turns blue when clicked on. Our table is configured to open a pop up when a row is clicked, and it is annoying the users that the row remains blue even after the popup is closed (and stays that way until another row is clicked).

I disabled row highlighting on the table and it turned off the mouseover color change, but not the click. We actually liked the mouseover but found that if a table had only one row, that row would remain highlighted after the curser moved off it. The only way to prevent this was to disable mouse over highlighting all together. Not the most desired solution, but better than having the row stuck blue.

Any advise that can be offered would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 15, 2021, 2:20pm UTC](https://forum.inductiveautomation.com/t/perspective-table-disable-row-highlight-on-click/50995/2 "2021-09-15T14:20:45Z")

</div>

there is a style in light.css which you can change/remove/overwrite

```auto
.ia_tableComponent__selection {
 background-color: rgba(12, 123, 179, 0.25);
}

```

if you dont know how to change the theme.css you can also inject this it into a styleclass’s background-image:  
(no need to give the class to any tables btw it will work on all tables just by being in the styleclasses)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/9/a9431c85d0e26a93e0f8dcf8820aef67582c92ae.png)  
}`.ia_tableComponent__selection { background-color: unset; }{`

---

<div class="post-metadata">

**Author:** ![gfeiten](https://avatars.discourse-cdn.com/v4/letter/g/cdc98d/32.png) [@gfeiten](https://forum.inductiveautomation.com/u/gfeiten)\
**Post date:** [September 16, 2021, 7:15pm UTC](https://forum.inductiveautomation.com/t/perspective-table-disable-row-highlight-on-click/50995/3 "2021-09-16T19:15:15Z")

</div>

hmmm…your second suggestion works on the test/trial license of ignition I have installed on my local pc (version 8.1.1), but not on the production server (version 8.0.6). I noticed that the style configuration window is slightly different. Version 8.1.1 has an applied styles section, but 8.0.6 does not. I can try upgrading over the weekend and see if it works.

version 8.0.6

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

version 8.1.1

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 17, 2021, 6:35am UTC](https://forum.inductiveautomation.com/t/perspective-table-disable-row-highlight-on-click/50995/4 "2021-09-17T06:35:09Z")

</div>

Ah if that doesnt work there you could upgrade (seems like a good idea anyways) or use theme.css

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [July 9, 2024, 7:59am UTC](https://forum.inductiveautomation.com/t/perspective-table-disable-row-highlight-on-click/50995/5 "2024-07-09T07:59:57Z")

</div>

Do you know how to also disable the cell border?

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [July 9, 2024, 8:11am UTC](https://forum.inductiveautomation.com/t/perspective-table-disable-row-highlight-on-click/50995/6 "2024-07-09T08:11:42Z")

</div>

You can configure the selection style here:

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

'`border: None`' will remove the border entirely.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 9, 2024, 8:16am UTC](https://forum.inductiveautomation.com/t/perspective-table-disable-row-highlight-on-click/50995/7 "2024-07-09T08:16:50Z")

</div>

This will remove keyboard accessibility though, there's a css prop to show it only when using the keyboard... I'll come back when I find it

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [July 9, 2024, 8:44am UTC](https://forum.inductiveautomation.com/t/perspective-table-disable-row-highlight-on-click/50995/8 "2024-07-09T08:44:59Z")

</div>

I'm using a table as a list to drag and drop values so I don't need the keyboard. Anyways, knowing how to do it would be nice, thanks.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 10, 2024, 12:33am UTC](https://forum.inductiveautomation.com/t/perspective-table-disable-row-highlight-on-click/50995/9 "2024-07-10T00:33:35Z")

</div>

The pseudo-class I was talking about is `focus-visible` as opposed to `focus`. `focus` applies the style to any component that currently has focus, regardless of whether the component needs to show its focused or not. Whereas `focus-visible` only applies it if the component needs to show the user. (I only just found out about this and haven't actually implemented it anywhere yet..)

> **[:focus-visible - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)**
>
> The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this...

Another useful pseudo-class I want to look at is `focus-within` which can style parent containers if its children have focus
