css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

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


  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.