Formatting text with a checkbox

#1

So I’ve been experimenting to ways of formatting text when a checkbox is checked inside of a table, and so far I have a css way of doing it (that I would like to not use, but I’ll explain why further down) but wanted to know if there would be a tiddlywiki way of doing it, since the example below, doesn’t work out of the box for firefox…

<style>
td:has( input[type="checkbox"]:checked ) ~ td.bye {
text-decoration: line-through red;
color: grey;
}
</style>

<table>
<tr>
    <td class="hello"><input type="checkbox"/></td>
    <td class="bye">text to style </td>
</tr>
</table>

I was thinking the $reveal widget would be able to, but I haven’t had any luck so far. I’m sure I’m overlooking something, but figured I would share this and see if anybody has a better method in mind, since the :has selector is so new to CSS

I’ve been using the input tag just for testing, but I already know the same is possible with the checkbox widget.

Edit:

For anyone looking for something like this but not in a table, you can use this (below) from an older google groups tiddlywiki thread!

<style>
.tc-checkbox input:checked + span {
   color: gray;
   text-decoration: line-through red;
}
input[type="checkbox"] { margin-right: 4px !important;}
</style>

<$checkbox>Hello</$checkbox>
2 Likes
#2

Can you put the conditional in the element rather than in the stylesheet? Something like

<td class={{{ [{!!checked}match[yes]then[checked-class]] }}}>

where {!!checked}match[yes] stands in for the outcome of checking the box.

If you need to apply more than one class to the same element, and at least one is conditional, you can use the same approach - just remember to add +[join[ ]], e.g.

<td class={{{ [[default-class]] [{!!checked}match[yes]then[checked-class]] +[join[ ]] }}}>
#3

I’ve haven’t used something like that before, but I can guestimate this changes the td class to a different one when the checkbox is checked, but doesn’t {!!checked} call to a field in the tiddler? I’m not sure how that part works, if you wouldn’t mind explaining, sorry :sweat_smile:

#4

I used {!!checked}match[yes] because I didn’t know what field/tag your checkbox was modifying, but you should replace that part of the filter with whichever field or tag indicates the checked state. So for instance, if your checkbox was <$checkbox tag="checked"/> you’d use <currentTiddler>tag[checked] instead. (This assumes you’re using a list filter to generate your table, and each <tr> corresponds to a tiddler you’re modifying.)

1 Like
#5

Another Approach is to instead use a button rather than checkbox, with action lists ops, then inside the button you can have a conditional display and styles for checked and unchecked. Unicode offers ballot boxes characters.