# Userstyle.css code for checkbox list labels

**URL:** <https://discourse.joplinapp.org/t/userstyle-css-code-for-checkbox-list-labels/45998>\
**Category:** Support\
**Created:** [23 June 2025 20:07 UTC](https://discourse.joplinapp.org/t/userstyle-css-code-for-checkbox-list-labels/45998 "2025-06-23T20:07:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![smelnich](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/smelnich/32/23434_2.png) [@smelnich](https://discourse.joplinapp.org/u/smelnich)\
**Post date:** [23 June 2025 20:07 UTC](https://discourse.joplinapp.org/t/userstyle-css-code-for-checkbox-list-labels/45998/1 "2025-06-23T20:07:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bwat47](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bwat47/32/25073_2.png) [@bwat47](https://discourse.joplinapp.org/u/bwat47)\
**Post date:** [23 June 2025 20:18 UTC](https://discourse.joplinapp.org/t/userstyle-css-code-for-checkbox-list-labels/45998/2 "2025-06-23T20:18:44Z")

</div>

This should work:

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

```

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

---

<div class="post-metadata">

**Author:** ![smelnich](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/smelnich/32/23434_2.png) [@smelnich](https://discourse.joplinapp.org/u/smelnich)\
**Post date:** [23 June 2025 20:23 UTC](https://discourse.joplinapp.org/t/userstyle-css-code-for-checkbox-list-labels/45998/3 "2025-06-23T20:23:56Z")

</div>

> [@bwat47](#):
>
> ```auto
> .checkbox-label-checked {
> opacity: 1 !important;
> }
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![tomasz86](https://avatars.discourse-cdn.com/v4/letter/t/96bed5/32.png) [@tomasz86](https://discourse.joplinapp.org/u/tomasz86)\
**Post date:** [23 June 2025 20:24 UTC](https://discourse.joplinapp.org/t/userstyle-css-code-for-checkbox-list-labels/45998/4 "2025-06-23T20:24:48Z")

</div>

For the Rich Text Editor, you can try this:

```auto
.checked { opacity: inherit !important; }

```

I personally also add

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

```

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

---

<div class="post-metadata">

**Author:** ![smelnich](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/smelnich/32/23434_2.png) [@smelnich](https://discourse.joplinapp.org/u/smelnich)\
**Post date:** [23 June 2025 20:53 UTC](https://discourse.joplinapp.org/t/userstyle-css-code-for-checkbox-list-labels/45998/5 "2025-06-23T20:53:30Z")

</div>

> [@tomasz86](#):
>
> `.checked { opacity: inherit !important; }`

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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/1/c/1c948e33314e232a0927789508474d8624f4270b.png) [@system](https://discourse.joplinapp.org/u/system)\
**Post date:** [23 July 2025 20:54 UTC](https://discourse.joplinapp.org/t/userstyle-css-code-for-checkbox-list-labels/45998/6 "2025-07-23T20:54:08Z")

</div>

Closed on 23 July 2025 20:54 UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.