[noob] Help with styling of checkboxes using CSS

[Hubert]

Hello,

This is a complete newbie question; I'm aware there are resources online but I could not get them to work. Thanks in advance for your help.

I'm looking for help with styling of checkboxes within TiddlyWiki. So far, I've only managed to remove the checkbox altogether... but was unable to replace it with anything useful.

Here's my wikitext (I've removed most of the code for clarity), a typical TW checkbox widget:

<$checkbox class=checkbox actions=<<some_actions>> tiddler="..." index="..." checked="_checked_" unchecked="_unchecked_" default="_unchecked_"/>

And here's my "CSS":

input[type=checkbox] {
    visibility: none;
}

.checkbox:checked {
    content: "x";
}

Has anyone managed to replace their checkboxes with something more pleasant to the eye and consistent across browsers using pure CSS?

Thank you for hints.

Regards,

Hubert

[JD]

Hello, 

I find styling checkboxes a pain in the A so I simply use stylized buttons for some specific issues (for example, checkboxes don't scale up in Chrome, and looks comically tiny beside text with a large font-size) 

I suppose you've already tried https://www.w3schools.com/howto/howto_css_custom_checkbox.asp, I wonder why that didn't work in your case?

For a sample of a button-checkbox, a work in progress: http://j.d.todo.tiddlyspot.com/ 

-jd 

[Hubert]

Thanks JD.

Yes, I did try the resource you've linked. Also, thanks for your button-checkbox draft, it looks nice. Creating dynamic SVG buttons that change depending on their state (using @reveal etc.) is something that I've explored recently with good results. However, converting all my existing check boxes to buttons would at this stage be an overkill. That said it is certainly some way out.

Too bad that these are so difficult to style. I'm aware it mostly stems from lack of consistency across browsers, which is not at all an issue with the way things have been implemented in TW itself.

Thanks again for your input.

Best,

Hubert

[Thomas Elmiger]

Hi Hubert

In https://tid.li/tw5/test/flippy.html I use a checkbox that is completely hidden – and style the label surrounding it. If you have a label accompanying your checkboxes this might be the way to go.

Good luck!

Thomas

[Hubert]

Thanks Thomas.

I was trying to work around the problem using this very approach (labels) but failed.

Thank you for the link to your resource, great work indeed! However, being the CSS newbie that I am, I found it rather difficult to sift through your code and the many transclusions and macro definitions that would eventually lead me to the magic around checkboxes.

Would you perhaps point me to a dumbed-down syntax that I could start to fiddle around with? Of course only if you have the time.

Thank you again!

[Thomas Elmiger]

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.8em;
    display: inline-block;
}
.nicebox > input[type=checkbox] + span:before {
    cursor: pointer;
    width: 1em;
    height: 1em;
    line-height: 0.66;
    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-left: 0.15em;
}
.nicebox > input[type=checkbox]:not(:checked) + span:before {
    background-color: #ddd;
}
.nicebox > input[type=checkbox]:checked + span:before {
    content: "×";
    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>

Hope that works in your browsers too.

[Thomas Elmiger]

The code in my last post has been replaced by a better version that includes a cross in the box when checked.

Have fun!

Thomas

[Hubert]

Thank you for sharing Thomas, I appreciate your time. Your code works and looks great!

Now I will try to learn about all the different pseudo classes from your example :).

Thanks again for contributing.

All the best,

Hubert

[JD]

Wow, thanks, Thomas!

This also works for me. I, too would have to study how you did it.

-jd