{"id":4275,"date":"2015-05-12T12:15:23","date_gmt":"2015-05-12T09:15:23","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=4275"},"modified":"2017-12-19T14:03:11","modified_gmt":"2017-12-19T12:03:11","slug":"html5-checkbox-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/","title":{"rendered":"HTML5 Checkbox Example"},"content":{"rendered":"

In this example, we shall take a closer look at how we can create and style checkbox elements with HTML5 markup and CSS3 styling.<\/p>\n

Creating checkboxes will be needed when you want to present the user a set of options they can choose from, which is most likely in surveys.<\/p>\n

First we take a basic approach to the html element and then try to style to make it look a bit more interesting than the default styling.<\/p>\n

An important part of styling a checkbox is design, so we will have a dedicated section with beautifully designed checkboxes.
\n 
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

1. Prerequisites & Basic Setup<\/h2>\n

First, go on and create a html file with its basic syntax inside:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>Checkbox Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n\t<!-- STYLE SECTION -->\r\n\t<style type=\"text\/css\">\r\n\r\n  \t<\/style>\r\n\r\n\t<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Now HTML5 has a way of creating a default checkbox. The code below would create a slightly basic checkbox:<\/p>\n
\r\n<!-- HTML SECTION -->\r\n<input type=\"checkbox\" name=\"fruit\" value=\"apple\" \/>Red Apple\r\n<\/pre>\n
where the checkbox is explicitly defined by the type=\"checkbox\"<\/code>. That would look like this:
\n
\"Basic<\/a>
Basic Checkbox of HTML<\/figcaption><\/figure><\/p>\n
If you want to have several items, you are recommended to create them under a under a form<\/code>.<\/p>\n
That is because you might probably want to make that functional and submit the data somewhere. Look at the code below:<\/p>\n
\r\n<!-- HTML SECTION -->\r\n\t\r\n<form method=\"post\">\t<!-- wrapping these under a form for later submission -->\r\n     <fieldset>\t<!-- gives your question (including answers) a nice border -->\r\n       <legend>What is Your Favorite Pet?<\/legend>\t\t<!-- Your question goes here -->\r\n            <input type=\"checkbox\" name=\"fruit\" value=\"apple\" \/>Red Apple <br \/>\r\n            <input type=\"checkbox\" name=\"fruit\" value=\"banana\" \/>Ecuador Banana<br \/>\r\n            <input type=\"checkbox\" name=\"fruit\" value=\"strawberry\" \/>Strawberry<br \/>\r\n            <input type=\"submit\" value=\"Submit now\" \/>\t\r\n            <!-- submit input type, has the view of a button -->\r\n      <\/fieldset>\r\n<\/form>\r\n<\/pre>\n
This more complete case would look like this:
\n
\"A<\/a>
A Question with Checkbox Answers<\/figcaption><\/figure>
\nNotice that everything we are doing has no styling at all up until now. But styling is an important part.<\/p>\n
 2. Styling the Checkbox <\/h2>\n
Lets begin by styling one of the checkboxes in detail to have a clearer idea.<\/p>\n
Below you can see the html and css code for customizing a checkbox with comments attached:<\/p>\n
Set up this html element which will be our configuration for the checkbox.<\/p>\n
\r\n<input type=\"checkbox\" id=\"1\" class=\"regular-checkbox\"\/><label for=\"1\"><\/label>\r\n<\/pre>\n
Now let’s style this checkbox by giving a different background color and check icon:<\/p>\n
\r\n.regular-checkbox {\r\n\tdisplay: none;\t\t\/* means 'do not display', refers to the default styled checkbox *\/\r\n}\r\n\r\n.regular-checkbox + label {\t\t\t\t\r\n\tbackground-color: green;\t\t\t\t\/* given a green background color *\/\r\n\tborder: 1px solid green;\t\t\t\t\/* given a green border color *\/\r\n\tpadding: 15px;\t\t\t\t\t\t\t\/* given padding not to stick to edges *\/\r\n\tborder-radius: 5px;\t\t\t\t\t\t\/* given radius for better view *\/\r\n\tdisplay: inline-block;\r\n\tposition: relative;\t\t\t\t\t\t\/* positioning facility for the icon *\/\r\n}\r\n<\/pre>\n
We have just created the base, I mean, the background and first view of the checkbox, which is not yet checkable.
\n
\"Checkbox<\/a>
Checkbox Styling – First Step<\/figcaption><\/figure><\/p>\n
Let’s add the check capability to this box:<\/p>\n
\r\n.regular-checkbox:checked + label:after {\t\t\/* :after meaning after being clicked *\/\r\n\tcontent: '\\2714';\t\t\t\t\t\t\t\/* the check icon displayed after click *\/\r\n\tfont-size: 20px;\t\t\t\t\t\t\t\/* the size of the font icon *\/\r\n\tposition: absolute;\t\t\t\t\t\t\t\/* positioning facility for the checkbox *\/\r\n\ttop: 1px;\t\t\t\t\t\t\t\t\t\/* further top alignment of the icon *\/\r\n\tleft: 7px;\t\t\t\t\t\t\t\t\t\/* further left alignment of the icon *\/\r\n\tcolor: white;\t\t\t\t\t\t\t\t\/* color of the font icon *\/\r\n}\r\n.regular-checkbox:active + label:active {\t\t\t\t\r\n\tbackground-color: #62b362;\t\t\t\t\/* different bg color on active state *\/\r\n}\r\n<\/pre>\n
Now we can say we have a different by design checkbox than the ones you are used to see randomly.
\n
\"Checkbox<\/a>
Checkbox Styling – Different by Design<\/figcaption><\/figure>
\nWhat is different here?<\/p>\n
1. Size – size in this checkbox is determined by the font size of the check font icon and also the padding given to it.<\/p>\n
2. Colors – both background color of the box and the color of the font icon is different from a normal checkbox here.<\/p>\n
3. Border\/Radius – border can be customised to any color and thickness and border radius can be adjusted.<\/p>\n
4. Check Icon – notice we have a slightly different icon for the check, it is an unicode character.<\/p>\n
 3. Design Examples <\/h2>\n
Now lets have a look at some beautifully designed checkboxes over the internet.<\/p>\n
 3.1 Slider Check Design <\/h3>\n
This design uses the CSS3 transitions to move a slider from the left to the right to indicate ‘on’ or ‘off’.<\/p>\n
Look at the HTML markup below:<\/p>\n
\r\n<section>\r\n  <h3>CHECKBOX DESIGN 1<\/h3>\r\n  \t<div class=\"checkbox-design1\">\r\n  \t\t<input type=\"checkbox\" value=\"1\" id=\"checkbox1\" name=\"\" \/>\r\n\t  \t<label for=\"checkbox1\"><\/label>\r\n  \t<\/div>\r\n<\/section>\r\n<\/pre>\n
And all the styling done by CSS would be:<\/p>\n
\r\ninput[type=checkbox] {\r\n\tvisibility: hidden; \/* hide the default checkbox *\/\r\n}\r\n\r\n.checkbox-design1 {\r\n\twidth: 120px;\r\n\theight: 40px;\r\n\tbackground: #333;\r\n\tborder-radius: 50px;\r\n\tposition: relative;\r\n}\r\n\r\n.checkbox-design1:before {\r\n\tcontent: 'ON';\t\t\t\r\n\tposition: absolute;\r\n\ttop: 12px;\r\n\tleft: 13px;\r\n\theight: 2px;\r\n\tcolor: #26ca28;\r\n\tfont-size: 16px;\r\n}\r\n.checkbox-design1:after {\r\n\tcontent: 'OFF';\t\t\t\r\n\tposition: absolute;\r\n\ttop: 12px;\r\n\tleft: 84px;\r\n\theight: 2px;\r\n\tcolor: #111;\r\n\tfont-size: 16px;\r\n}\r\n\r\n.checkbox-design1 label {\r\n\tdisplay: block;\r\n\twidth: 52px;\r\n\theight: 22px;\r\n\tborder-radius: 50px;\r\n\t-webkit-transition: all .5s ease;\r\n\t-moz-transition: all .5s ease;\r\n\t-o-transition: all .5s ease;\r\n\t-ms-transition: all .5s ease;\r\n\ttransition: all .5s ease;\r\n\tcursor: pointer;\r\n\tposition: absolute;\r\n\ttop: 9px;\r\n\tz-index: 1;\r\n\tleft: 12px;\r\n\tbackground: #ddd;\r\n}\r\n.checkbox-design1 input[type=checkbox]:checked + label {\r\n\tleft: 60px;\r\n\tbackground: #26ca28;\r\n}\r\n<\/pre>\n
This slider check would look like this:
\n
\"Checkbox<\/a>
Checkbox Slider Design<\/figcaption><\/figure><\/p>\n
 3.2 Background Filled Checkbox on Check <\/h3>\n
You might have recently seen that a lot of checkboxes come with a filled background color when checked and not an icon.<\/p>\n
Look at the HTML markup below:<\/p>\n
\r\n<div class=\"checkbox-design2\">\r\n\t<input type=\"checkbox\" value=\"None\" id=\"checkbox-design2\" name=\"check\" \/>\r\n\t<label for=\"checkbox-design2\"><\/label>\r\n<\/div>\r\n<\/pre>\n
The CSS to this is:<\/p>\n
\r\n.checkbox-design2 {\r\n\twidth: 28px;\r\n\theight: 28px;\r\n\tbackground: #fcfff4;\r\n\tbackground: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);\r\n\tbackground: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);\r\n\tbackground: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);\r\n\tbackground: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);\r\n\tbackground: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);\r\n\tmargin: 20px auto;\r\n\t-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);\r\n\t-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);\r\n\tbox-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);\r\n\tposition: relative;\r\n}\r\n\r\n.checkbox-design2 label {\r\n\tcursor: pointer;\r\n\tposition: absolute;\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tleft: 4px;\r\n\ttop: 4px;\r\n\t-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);\r\n\t-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);\r\n\tbox-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);\r\n\tbackground: -webkit-linear-gradient(top, #222 0%, #45484d 100%);\r\n\tbackground: -moz-linear-gradient(top, #222 0%, #45484d 100%);\r\n\tbackground: -o-linear-gradient(top, #222 0%, #45484d 100%);\r\n\tbackground: -ms-linear-gradient(top, #222 0%, #45484d 100%);\r\n\tbackground: linear-gradient(top, #222 0%, #45484d 100%);\r\n\r\n}\r\n\r\n.checkbox-design2 label:after {\r\n\topacity: 0;\r\n\tcontent: '';\r\n\tposition: absolute;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n\tbackground: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);\r\n\tbackground: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);\r\n\tbackground: -o-linear-gradient(top, #00bf00 0%, #009400 100%);\r\n\tbackground: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);\r\n\tbackground: linear-gradient(top, #00bf00 0%, #009400 100%);\r\n\ttop: 2px;\r\n\tleft: 2px;\r\n\t-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);\r\n\t-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);\r\n\tbox-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);\r\n}\r\n\r\n.checkbox-design2 input[type=checkbox]:checked + label:after {\r\n\topacity: 1;\r\n}\r\n<\/pre>\n
This design would look like this:
\n
\"Filled<\/a>
Filled Bacgground on Check Design<\/figcaption><\/figure><\/p>\n
 3.3 A Checkcircle? YES <\/h3>\n
Lets now change the overall thought that checks can only be put inside a box. It can be put everywhere, including a circle.<\/p>\n
Look at the HTMl markup below:<\/p>\n
\r\n<div class=\"checkcircle-design3\">\r\n\t<input type=\"checkbox\" value=\"None\" id=\"checkcircle-design3\" name=\"check\" \/>\r\n\t<label for=\"checkcircle-design3\"><\/label>\r\n<\/div>\r\n<\/pre>\n
The respective CSS:<\/p>\n
\r\ninput[type=checkbox] {\r\n\tvisibility: hidden;\r\n}\r\n.checkcircle-design3 {\r\n\twidth: 28px;\r\n\theight: 28px;\r\n\tbackground: #fcfff4;\r\n\r\n\tbackground: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);\r\n\tbackground: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);\r\n\tbackground: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);\r\n\tbackground: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);\r\n\tbackground: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);\r\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );\r\n\tmargin: 20px auto;\r\n\r\n\t-webkit-border-radius: 50px;\r\n\t-moz-border-radius: 50px;\r\n\tborder-radius: 50px;\r\n\r\n\t-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);\r\n\t-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);\r\n\tbox-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);\r\n\tposition: relative;\r\n}\r\n\r\n.checkcircle-design3 label {\r\n\tcursor: pointer;\r\n\tposition: absolute;\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\r\n\t-webkit-border-radius: 50px;\r\n\t-moz-border-radius: 50px;\r\n\tborder-radius: 50px;\r\n\tleft: 4px;\r\n\ttop: 4px;\r\n\r\n\t-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);\r\n\t-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);\r\n\tbox-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);\r\n\r\n\tbackground: -webkit-linear-gradient(top, #222 0%, #45484d 100%);\r\n\tbackground: -moz-linear-gradient(top, #222 0%, #45484d 100%);\r\n\tbackground: -o-linear-gradient(top, #222 0%, #45484d 100%);\r\n\tbackground: -ms-linear-gradient(top, #222 0%, #45484d 100%);\r\n\tbackground: linear-gradient(top, #222 0%, #45484d 100%);\r\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );\r\n}\r\n\r\n.checkcircle-design3 label:after {\r\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\r\n\tfilter: alpha(opacity=0);\r\n\topacity: 0;\r\n\tcontent: '';\r\n\tposition: absolute;\r\n\twidth: 9px;\r\n\theight: 5px;\r\n\tbackground: transparent;\r\n\ttop: 5px;\r\n\tleft: 4px;\r\n\tborder: 3px solid #fcfff4;\r\n\tborder-top: none;\r\n\tborder-right: none;\r\n\r\n\t-webkit-transform: rotate(-45deg);\r\n\t-moz-transform: rotate(-45deg);\r\n\t-o-transform: rotate(-45deg);\r\n\t-ms-transform: rotate(-45deg);\r\n\ttransform: rotate(-45deg);\r\n}\r\n\r\n.checkcircle-design3 label:hover::after {\r\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)\";\r\n\tfilter: alpha(opacity=30);\r\n\topacity: 0.3;\r\n}\r\n\r\n.checkcircle-design3 input[type=checkbox]:checked + label:after {\r\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\r\n\tfilter: alpha(opacity=100);\r\n\topacity: 1;\r\n}\r\n<\/pre>\n
Don’t get afraid of all that, most of it is gradients and cross-browser compatibility.
\n
\"Checkcircle<\/a>
Checkcircle Design<\/figcaption><\/figure><\/p>\n
 4. Conclusion <\/h2>\n
To conclude, we can state that creating custom checkboxes can be a difficult task sometimes on personalizing. <\/p>\n
It covers some important css properties like position<\/code>, z-index<\/code>, gradients<\/code> and filter<\/code>. <\/p>\n
And it will come handy a lot when creating surveying or poll websites for which the main focus is on these elements.<\/p>\n
However, for a normal, non-commercial\/non-premium use, you can design your own plain checkboxes using css.<\/p>\n
 5. Download <\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: HTML5 Checkbox<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this example, we shall take a closer look at how we can create and style checkbox elements with HTML5 markup and CSS3 styling. Creating checkboxes will be needed when you want to present the user a set of options they can choose from, which is most likely in surveys. First we take a basic …<\/p>\n","protected":false},"author":75,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-4275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"\nHTML5 Checkbox Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we shall take a closer look at how we can create and style checkbox elements with HTML5 markup and CSS3 styling. Creating checkboxes will\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Checkbox Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we shall take a closer look at how we can create and style checkbox elements with HTML5 markup and CSS3 styling. Creating checkboxes will\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-12T09:15:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T12:03:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"HTML5 Checkbox Example\",\"datePublished\":\"2015-05-12T09:15:23+00:00\",\"dateModified\":\"2017-12-19T12:03:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/\"},\"wordCount\":731,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/\",\"name\":\"HTML5 Checkbox Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2015-05-12T09:15:23+00:00\",\"dateModified\":\"2017-12-19T12:03:11+00:00\",\"description\":\"In this example, we shall take a closer look at how we can create and style checkbox elements with HTML5 markup and CSS3 styling. Creating checkboxes will\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Checkbox Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Checkbox Example - Web Code Geeks - 2026","description":"In this example, we shall take a closer look at how we can create and style checkbox elements with HTML5 markup and CSS3 styling. Creating checkboxes will","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Checkbox Example - Web Code Geeks - 2026","og_description":"In this example, we shall take a closer look at how we can create and style checkbox elements with HTML5 markup and CSS3 styling. Creating checkboxes will","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-05-12T09:15:23+00:00","article_modified_time":"2017-12-19T12:03:11+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"HTML5 Checkbox Example","datePublished":"2015-05-12T09:15:23+00:00","dateModified":"2017-12-19T12:03:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/"},"wordCount":731,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/","name":"HTML5 Checkbox Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2015-05-12T09:15:23+00:00","dateModified":"2017-12-19T12:03:11+00:00","description":"In this example, we shall take a closer look at how we can create and style checkbox elements with HTML5 markup and CSS3 styling. Creating checkboxes will","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-checkbox-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Checkbox Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=4275"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4275\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=4275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=4275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=4275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}