The best I can come up with at the moment is this, it works in my wiki as
well as on tiddlywiki.com:
<$checkbox tag="done" class="nicebox"> Da task is now done – although it
was not so easy to accomplish </$checkbox>
<style>
.nicebox > input[type=checkbox] + span {
padding-left: 1.85em;
text-indent: -0.10em;
display: inline-block;
position: relative;
}
.nicebox > input[type=checkbox] + span:before {
cursor: pointer;
width: 1em;
height: 1em;
box-sizing: border-box;
content: "";
color: #ddd;
font-weight: bold;
border: 1px solid #333;
position: absolute;
margin-left: -1.75em;
margin-top: 0.25em;
padding:0 0.2em 0 0.2em;
}
.nicebox > input[type=checkbox]:not(:checked) + span:before {
background-color: #ddd;
}
.nicebox > input[type=checkbox]:checked + span:before {
color: #ddd;
background-color: #666;
}
label.nicebox > input[type=checkbox] {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
</style>
What I could not achieve ist to position a cross × in the box nicely. Maybe
I can fix that some time.
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/d5c00a9d-d77e-438e-86df-932354192dfa%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
