Most methods for styling the checkbox element rely on some variation of Ryan Seddon's “checkbox hack.” Unfortunately, every version I have ever seen has one or more problems.
Because the checkbox hack involves hiding the actual checkbox and covering it with something else, it breaks the behavior of the focus outline while navigating the form using the tab key. This version uses the appearance property (admittedly controversial), but retains default behavior of the checkbox in all browsers.
Unlike other css-stylable checkboxes, notice:
—You can tab/shift-tab between the checkboxes —You get a focus outline, so you know where you are —The style of the focus outline is the style that is native to the browser you are using (i.e. blurred blue for Chrome and Safari, dotted black for Firefox —You can check/uncheck using the spacebar —You can check/uncheck by using the mouse to click on the box itself, or on the box’s label