Support for custom checkbox elements (span)
lockerbleiben opened this issue · comments
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.
@lockerbleiben how should it work? Can you provide some examples?
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.
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.
Running into the same issue, but only realized now after weeks of re-design... Guess will need to look for something else :(
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?
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/