![\"Collection](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-04-30\/collection-beautiful-css-checkbox-styles.jpeg\")
<\/figure>\n\n\n\n\nLooking for Toggle elements? Then check out our list of 20+ CSS Toggle Switches<\/a><\/p>\n<\/blockquote>\n\n\n\n
How to Create a Custom CSS Checkbox Style<\/h2>\n\n\n\n
Here is how to style a checkbox using CSS:<\/strong><\/p>\n\n\n\n
Step 1: Set Up the HTML<\/h3>\n\n\n\n
Start with a basic HTML structure. We\u2019ll wrap the checkmark box in a
<label><\/code> so it\u2019s easier to click.<\/p>\n\n\n<label<\/span> class<\/span>=\"custom-checkbox\"<\/span>><\/span>\n <input<\/span> type<\/span>=\"checkbox\"<\/span>><\/span>\n <span<\/span> class<\/span>=\"checkmark\"<\/span>><\/span><\/span<\/span>><\/span>\n Subscribe to newsletter\n<\/label<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n\n
- The
<input type=\"checkbox\"><\/code> is the actual checkbox.<\/li>\n\n\n\n- The
<span class=\"checkmark\"><\/code> will be the custom visual checkbox.<\/li>\n\n\n\n- The label text (\u201cSubscribe to newsletter\u201d) can be anything you like.<\/li>\n<\/ul>\n\n\n\n
Step 2: Style with CSS<\/h3>\n\n\n\n
Now let\u2019s hide the default checkbox and style the
.checkmark<\/code>.<\/p>\n\n\n\/* Hide default checkbox *\/<\/span>\n.custom-checkbox<\/span> input<\/span>[type=\"checkbox\"<\/span>]<\/span> {\n display<\/span>: none;\n}\n\n\/* Create custom box *\/<\/span>\n.custom-checkbox<\/span> .checkmark<\/span> {\n display<\/span>: inline-block;\n width<\/span>: 20px<\/span>;\n height<\/span>: 20px<\/span>;\n background-color<\/span>: #eee<\/span>;\n border<\/span>: 2px<\/span> solid #ccc<\/span>;\n border-radius<\/span>: 4px<\/span>;\n margin-right<\/span>: 8px<\/span>;\n vertical-align<\/span>: middle;\n position<\/span>: relative;\n cursor<\/span>: pointer;\n}\n\n\/* Show checkmark when checked *\/<\/span>\n.custom-checkbox<\/span> input<\/span>:checked<\/span> + .checkmark<\/span>::after<\/span> {\n content<\/span>: \"\"<\/span>;\n position<\/span>: absolute;\n left<\/span>: 5px<\/span>;\n top<\/span>: 1px<\/span>;\n width<\/span>: 6px<\/span>;\n height<\/span>: 12px<\/span>;\n border<\/span>: solid #333<\/span>;\n border-width<\/span>: 0<\/span> 2px<\/span> 2px<\/span> 0<\/span>;\n transform<\/span>: rotate<\/span>(45deg<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nThis code does the following:<\/p>\n\n\n\n
\n
- Hides the native checkbox input (
display: none<\/code>).<\/li>\n\n\n\n- Style a square box (
.checkmark<\/code>) to look like a checkbox.<\/li>\n\n\n\n- Adds a checkmark using the
::after<\/code> pseudo-element when the\u00a0selection box is checked.<\/li>\n<\/ul>\n\n\n\nStep 3: Add Hover or Focus Styles (Optional)<\/h3>\n\n\n\n
Make it interactive, adding a property to include a mouseover effect:<\/p>\n\n\n
.custom-checkbox<\/span>:hover<\/span> .checkmark<\/span> {\n background-color<\/span>: #ddd<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nStep 4: Paste the Solution Example on Your Site<\/h3>\n\n\n\n
Here\u2019s everything together in one block so you can test it:<\/p>\n\n\n
<style<\/span>><\/span>\n .custom-checkbox<\/span> input<\/span>[type=\"checkbox\"<\/span>]<\/span> {\n display<\/span>: none;\n }\n\n .custom-checkbox<\/span> .checkmark<\/span> {\n display<\/span>: inline-block;\n width<\/span>: 20px<\/span>;\n height<\/span>: 20px<\/span>;\n background-color<\/span>: #eee<\/span>;\n border<\/span>: 2px<\/span> solid #ccc<\/span>;\n border-radius<\/span>: 4px<\/span>;\n margin-right<\/span>: 8px<\/span>;\n vertical-align<\/span>: middle;\n position<\/span>: relative;\n cursor<\/span>: pointer;\n }\n\n .custom-checkbox<\/span> input<\/span>:checked<\/span> + .checkmark<\/span>::after<\/span> {\n content<\/span>: \"\"<\/span>;\n position<\/span>: absolute;\n left<\/span>: 5px<\/span>;\n top<\/span>: 1px<\/span>;\n width<\/span>: 6px<\/span>;\n height<\/span>: 12px<\/span>;\n border<\/span>: solid #333<\/span>;\n border-width<\/span>: 0<\/span> 2px<\/span> 2px<\/span> 0<\/span>;\n transform<\/span>: rotate<\/span>(45deg<\/span>);\n }\n\n .custom-checkbox<\/span>:hover<\/span> .checkmark<\/span> {\n background-color<\/span>: #ddd<\/span>;\n }\n<\/span><\/style<\/span>><\/span>\n\n<label<\/span> class<\/span>=\"custom-checkbox\"<\/span>><\/span>\n <input<\/span> type<\/span>=\"checkbox\"<\/span>><\/span>\n <span<\/span> class<\/span>=\"checkmark\"<\/span>><\/span><\/span<\/span>><\/span>\n Subscribe to newsletter\n<\/label<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nWith just a few lines of CSS and HTML, you’ve created your stylish checkmark\u00a0that looks great on any modern site!<\/p>\n\n\n\n
17 Amazing CSS Checkbox Styles to Copy<\/h2>\n\n\n\n
Now that you know how to build a tailor-made checkbox with CSS, it\u2019s time to explore some creative possibilities. Below, you\u2019ll find over 15 unique checkmark box pens, ranging from minimal and contemporary to fun and bouncy.<\/p>\n\n\n\n
These checkbox CSS styles are ready to copy and paste into your project, making it easy to upgrade your forms with a fresh look in seconds.<\/p>\n\n\n\n
1.\u00a0Gradient Styles<\/a><\/h3>\n\n\n\n