Nicer Checkboxes

Just a simple CSS snippet that makes your checkboxes nicer. Drop the code below into your obsidian.css and it should work with your theme

input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 1px solid var(--text-faint);
    padding: 0;
}
input[type=checkbox]:focus{
  outline:0;
}
input[type=checkbox]:checked {
    background-color: var(--text-accent-hover);
    border: 1px solid var(--text-accent-hover);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}
.markdown-preview-view .task-list-item-checkbox { margin-left:-25px; } 
.markdown-preview-view .task-list-item { padding-inline-start:25px; }
16 Likes

nice, tried it , worked great.

How do I make the checkboxes as I type? (what key combinations?)

I don’t know about a key combination, but you’d type them like this: - [ ] your todo

Here is the AHK script that I use
; TO DO LIST - press Alt+G
!g::
send - [ ]
return

3 Likes

The checkbox and the text next to it are not aligned properly.
checkbox

2 Likes

Love this styling, makes my priorities list way nicer

But I noticed 1 issue: they don’t render in floating transclusions, I only see list bullet points in place of checkboxes. (They do render in in-place transclusions)

Is this an issue with my theme or something this snippet should(could) address?

What is a floating transclusion?

It’s what I call the thing that appears when you hover in Preview on an internal link.

(I realize it’s a misnomer, not actually a transclusion; more like a link preview…)

Add
vertical-align: middle;
After the first line of the Css code snippet and they should improve

4 Likes

Thanks, @rsdimitrov, that works.

One small improvement I have made is to add this code which helps long lines wrap correctly (i.e. indent at the checkbox). You may need to change the indent value to fit the font you’re using.

.markdown-preview-view .task-list-item { text-indent: -30px; margin-left:0;}

1 Like

@kepano Works great.

Just a minor issue: I notice that bullets underneath a checkbox are extra indented after the first line.

Screen Shot 2020-07-04 at 8.08.03 AM

Normal bullets without checkboxes are still fine tho.

Ah good catch. Remove the code above and try this instead:

.markdown-preview-view .task-list-item-checkbox { margin-left:-25px; } .markdown-preview-view .task-list-item { padding-inline-start:25px; }

1 Like

Works perfectly now. Thanks!

It actually works really nice. Thanks a lot!!