Selection color opacity

CSS Customisation
1

In Settings, there’s an option to customize “Selection color”. However, this just adjusts the color tone. Is it possible to adjust transparency using CSS?

For starters…

ul li.selectedTask {
  background-color: rgba(0, 0, 0, .1);
}

adjusts transparency for something different. The change shows up behind the select box.

2

I’m using the “Custom CSS” feature (paid) to adjust whatever I like. Works great.

1 Like
3

It sounds like he knows that the Custom CSS feature exists, and is wondering specifically about implementing transparency, using that feature. Do you know if the Custom CSS feature allows you to adjust the transparency of selected line items, and if so, what selectors are used?

4

I’ve tried using all forms of rgba, and background: none, but nothing seems to do the trick. Have you found a means of changing the background opacity on selected/highlighted items?

5

Hi,

In the latest Checkvist verisons there is some limited support for CSS variables.
So setting the selection color could be made like

:root {
    --sel: rgba(215, 239, 255, 0.5);
}
.coreDiv.selectedTask span.editable {
  background-color: transparent;
}

Hope this helps,