Circular check sytle for todos

Using the Enhancement plugin, the style of todos in the markdown editor render circular like this:


Is it possible via userstyle.css to have a similar circular style in the viewer pane?

Instead of this:


I could get close, but the checkmark is lost. Maybe someone else can figure it out. Based on html - How to make checkboxes rounded? - Stack Overflow :

input[type="checkbox"] {
    width: 1.3em;
    height: 1.3em;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;

Btw. for the richtext editor this was easier:

ul.joplin-checklist li:not(.checked)::before {
	content: "\f111" !important

ul.joplin-checklist li.checked::before {
	content: "\f058" !important
1 Like

Hi @Marph, thanks for your input. I'll have a play around with your CSS. If I have any luck, I'll post the solution back here.

I like the look of the round check-boxes (I suppose, the round check-circles would be a better description :slight_smile: )

1 Like

actually, macOS theme performs this magic for you.

can't tell how it's being done, but maybe this may serve as a hint (or elsewhere on this repo).

1 Like

Author of the theme mentioned above here. Iā€™m on mobile, so unable to provide an example but the solution is to use a ::after or ::before pseudo element in stead of styling the element directly.

1 Like

Thanks folks, I'll play around around with this. I'll be just chancing my arm, but might learn something in the process.


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