When trying out Wolfery in the Pale Moon browser to ensure using div instead of button element for badges helped resolve the button nesting issue, I noticed that checkboxes rendered with an unexpected inner padding when the border is applied:
@Wolfbeast, I guess you can help me with this one?
Otherwise, Wolfery does seem to work quite fine with the browser 
Iâm surprised youâre not using a styled checkbox form element for that. That would likely solve all your problems. (and prevent you from having to manually implement a check/uncheck function with a button and a colored divâŚ)
The reason the âextra paddingâ is there is because itâs a <button> and those form elements reserve some space for the (accessibility) focus ring (to keyboard-navigate). Thereâs currently no way to remove that extra spacing, but I can make it an issue to change that behavior if it causes web compat problems and see if I can find a solution since it does get kind of in the way of full styling of those elements.
One reason is that the ToggleBox component (which is what I call it) also supports toggling between multiple states. This would not work with a checkbox that only has two states (or three, counting âdisabledâ). Eg. setting character tags with the GUI:
Another reason is because I didnât know you can style checkboxes to that extent 
.
Ah, I see, yeah the multiple selections styling makes sense, although it doesnât take away f course that youâre still manually processing it 
As a possible solution, Iâd suggest you make the <button> completely transparent (and remove the border), and place the border on the <div> that indicates the checked state, instead. That way youâre avoiding trying to construct a single visual control from multiple elements that might not behave as expected when styled, while needing no code changes otherwise.