Support for custom checkbox elements (span)

[lockerbleiben]

Hey,
i wonder if its possible to add functionality for "checkbox-overlapping spans"?!

e.g. <label class="option"><input type="checkbox"><span class="checkbox"></span> Option</label>

the span is a - css based- "checkbox lookalike"-span, while the original checkbox is invisible.

[rmariuzzo]

@lockerbleiben how should it work? Can you provide some examples?

[lockerbleiben]

Hey,
you can find a very common example under
http://doptiq.com/smartforms/v4/demos/templates/elegant/ui.html
another one:
https://mdbootstrap.com/components/inputs/
last but not least - material Design
http://material-components-web.appspot.com/checkbox.html

The Idea ist to hide a checkbox and replace it by a nice styled span oder label (wich almost has a class, which can be accessed)
e.g.
<label class="option"><input type="checkbox"><span class="checkbox"></span> Option</label>

So, maybe its possible to tell your script not to work with the checkbox itself instead of working with a given class of a given element.

[brando-online]

Im coming up against this with using the font awesome webfont too. Using something like this one on codepen: https://codepen.io/jamesbarnett/pen/yILjk

Holding back on doing the finger-friendly upgrade based on font awesome, because I really dont want to lose the features and simplicity of your plugin.

[thenitai]

Running into the same issue, but only realized now after weeks of re-design... Guess will need to look for something else :(

[allexnew]

I have exactly the same problem. If you replace the checkbox with a stylized image, the selection does not occur. Has anyone solved this problem?

[allexnew]

The script does not work if you use the "display: none;" element for the checkbox input.
If you use it like this:
.custom-checkbox { position: absolute; z-index: -1; opacity: 0; }
then everything works.

Exemple: https://dimox.name/custom-checkboxes-and-radio-buttons-using-css-only/