Userstyle.css code for checkbox list labels

Support
1

Operating system

Windows

Joplin version

3.3.12

Desktop version info

Joplin 3.3.12 (prod, win32)

Sync target

File system

Editor

Rich Text Editor

What issue do you have?

Hi there,

In the reach text editor, I need CHECKED boxes and labels to have the same color as a default unchecked box. Clicking on unchecked item should not make a label and a box greyed out.

The reason is that my todo lists have value to me even if tasks were completed a long time ago. I usually check those lists many times after 3-6 months after completion.

Currently, the labels are grayed out and with my poor vision it is almost impossible to read them.

I already made two attempts (a few hours each) to find a solution online including this forum. Unfortunately, no matter what I do with my userstyle.css. nothing is working.

For example, the following code does not produce any visual changes:
input[type=checkbox]:checked {
background-color: yellow;
}

Still, I like the product very much.

Thank you

2

This should work:

.checkbox-label-checked {
    opacity: 1 !important;
}

EDIT: This only works in the Markdown editor (not the rich text editor)

1 Like
3

Unfortunatelly it does not work for me. I updated userstyle.css and restarted Joplin. It still the same.

4

For the Rich Text Editor, you can try this:

.checked { opacity: inherit !important; }

I personally also add

.checked { text-decoration: line-through !important; }

to make "done" items more obvious and easier to see.

1 Like
5

This one worked! Thank you, thank you, thank you.
You made my day.