CSS Stylish Custom Checkbox and Radio Input

CSS Stylish Custom Checkbox and Radio InputMahmoud ElmahdiBlockedUnblockFollowFollowingMay 31Checkbox and radio input fields are often used for web forms, and the default visual appearance depends on the browser that the users are on and may look inconsistent on different platforms.

Historically we had to use JavaScript to customize these elements to have basic effects.

Fortunately, nowadays there are more techniques and different ways to customize the look and feel of checkbox and radio input fields entirely with CSS (w/o JavaScript) so we can deliver a better user experience with clean and nice UI.

In this article, I’ll show you a step-by-step approach on how to create a Stylish Custom Checkbox and Radio input fields.

DemoJust so you have an idea of what the end effect is going to look like, here’s the final demoSemantic HTMLFirst we need to layout our HTML<label for=".

The label element's for attribute matches the id attribute of the input element (required)si stands for "stylish input" followed by a prefixed hyphen class ( si-checkbox, si-radio and si-switcher) to specify the element we want to display.

data-onchecked="show" will be hidden by default, on input:checked will become visible.

<label for="showOnChecked" class="si si-checkbox"> <input type="checkbox" id="showOnChecked" /> <span class="si-label">Show "I'm not a robot" on checked</span> <span data-onchecked="show">I'm not a robot</span></label>data-onchecked="hide" will be visible by default, on input:checked will become hidden.