{"id":980,"date":"2016-02-25T09:04:42","date_gmt":"2016-02-25T09:04:42","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=980"},"modified":"2023-10-12T10:00:30","modified_gmt":"2023-10-12T10:00:30","slug":"how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/","title":{"rendered":"How to Create and Style HTML Checkbox with pure CSS and a plug-in"},"content":{"rendered":"

The checkbox tag<\/strong><\/h3>\n

In HTML, you can create a checkbox by using the <input> tag and specify the type = checkbox, as shown in the syntax below:<\/strong><\/p>\n

<input type=\u201dcheckbox\u201d name=\u201dcheckboxName\u201d value=\u201dValue_of_checkbox\u201d><\/em><\/p>\n

In this tutorial, I will show you how you can create checkboxes in HTML forms.<\/p>\n

I will also explain how you may style checkboxes by CSS and a plug-in and how\u00a0you may use the checkbox value after the form is submitted, so keep reading!<\/p>\n

An example of creating a single checkbox in HTML form<\/strong><\/h3>\n

In this example, a checkbox is created by using the <input> tag. I used only basic attributes to demonstrate how a checkbox can be created. See the output and code online:<\/p>\n

\"HTML<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\r\n\r\n<style>\r\n.divcls\r\n{\r\nwidth:250px;\r\nheight: auto;\r\npadding:20px;\r\nbackground-color:#009700;\r\ncolor:#fff;\r\nfont-size:20px;\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"divcls\"><p>A simple Checkbox<\/p>\r\n<input type=\"checkbox\" name=\"chkdemo\"\/>Checkbox caption\r\n<\/div>\r\n\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
Accessing the value of checkbox in the PHP script<\/strong><\/h3>\n
You may access the value of a checkbox by using the name attribute. See the following example, where a checkbox is created and its value is accessed in PHP script. To test it, tick the checkbox and press the submit button.<\/p>\n
\"HTML<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
If a checkbox is checked, it evaluates as true<\/strong> otherwise false<\/em><\/strong>. If a checkbox is unchecked, it sends an empty value. You may get the value of checkbox only if it was checked.<\/p>\n
In the if statement of example, first I evaluated if the check was checked or not. If it was true, the value is displayed by using the $_POST[“”]<\/strong> array. The following code is used in the example for creating a checkbox in HTML:<\/p>\n
<form action=\"\" method=\"post\">\r\n\r\n<div class=\"divcls\"><p>A Checkbox demo with value<\/p>\r\n\r\n<input type=\"checkbox\" name=\"chkdemo\" value=\"HTML\"\/>HTML (Hypertext Markup Language)\r\n\r\n\r\n\r\n<\/div>\r\n\r\n<p><input type=\"submit\" value=\"Submit\" class=\"btncls\"><\/p>\r\n\r\n<\/form><\/pre>\n
This is the PHP script used to access the value:<\/p>\n
<?php\r\n\r\nif( $_POST[\"chkdemo\"] )\r\n\r\n{\r\n\r\necho \"The checkbox is checked and its value is: \". $_POST[\"chkdemo\"]. \"<br \/>\";\r\n\r\n\r\n\r\nexit();\r\n\r\n}\r\n\r\nelse\r\n\r\n{\r\n\r\necho \"The checkbox is unchecked!\";\r\n\r\n}\r\n\r\n?><\/pre>\n
Using checked attribute in a checkbox demo<\/strong><\/h3>\n
By using the checked<\/em> attribute, the checkbox will be ticked as web page loads. In this example, I used checked<\/strong> <\/em>attribute and accessed its value in PHP script.<\/p>\n
As you press the submit button, the value of the\u00a0checkbox will be checked, just like in above example. See the demo online:<\/p>\n
\"HTML<\/p>\n
This is how checkbox was created in this example:<\/p>\n
<input type=\"checkbox\" name=\"chkdemo\" value=\"Yes\" checked >Yes \/ No<\/pre>\n
Complete code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\r\n\r\n<style>\r\nspan\r\n{\r\nwidth:250px;\r\nheight: auto;\r\npadding:20px;\r\nbackground-color:#4E697E;\r\ncolor:#fff;\r\nfont-size:15px;\r\n}\r\n.btncls{\r\n    background-color:#F6B33C;\r\n    border: #2e6da4;\r\n  \tfont-family: Arial, Geneva, Arial, Helvetica,  sans-serif;\r\n\tfont-size: 15px;\r\n    color: #000;\r\n    letter-spacing: 1px;\r\n    padding: 8px 12px;\r\n    font-size: 14px;\r\n    font-weight: normal;\r\n    \r\n    border-radius: 4px;\r\n    line-height: 1.5;\r\n    text-decoration:none;\r\n} \r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n<form action=\"\" method=\"post\">\r\n    <span>Agreed with Terms and Conditions?\r\n    <input type=\"checkbox\" name=\"chkdemo\" value=\"Yes\" checked >Yes \/ No<\/span>\r\n\r\n    <p><input type=\"submit\" value=\"Submit\" class=\"btncls\"><\/p>\r\n<\/form>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<!-- The PHP Code -->\r\n< ?php\r\n  if( $_POST[\"chkdemo\"] )\r\n    { \r\n     echo \"You agreed with terms and conditions!\";\r\n \r\n     exit();\r\n    }\r\n  else\r\n   {\r\n    echo \"You are not agreed with terms and conditions!\";\r\n   }  \r\n ?> \r\n\r\n<\/pre>\n
Styling checkboxes with CSS example<\/strong><\/h3>\n
Styling different elements of the web page by CSS<\/a>\u00a0are easier including div, paragraphs, lists, tables etc. Similarly, form controls like textboxes, textarea, buttons can be styled quite easily by using CSS\/CSS3 properties.<\/p>\n
However, styling the checkbox and radio button\u00a0is a bit tricky task. There are many plug-ins that use JavaScript and enables us to create beautiful checkboxes including switches. One such plug-in is used in examples at the last part of this guide, that uses Bootstrap framework.<\/p>\n
Let me show you pure CSS based checkboxes first<\/strong>\u00a0where I changed the borders and default checked properties of a checkbox of HTML. See the demo online:<\/p>\n
\"HTML<\/p>\n
Code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\r\n<style>\r\ninput[type=checkbox] {\r\n    display: none;\r\n}\r\n\r\ninput[type=checkbox] + label {\r\n    display: inline-block;\r\n    position: relative;\r\n    padding: 8px;\r\n    background-color: white;\r\n    border: 1px solid black;\r\n    border-radius: 5px;\r\n    width:8px;\r\n}\r\n\r\ninput[type=checkbox]:checked + label {\r\n    background-color: #475F72;\r\n    color: #A4B7C6;\r\n}\r\n\r\ninput[type=checkbox]:checked + label:after {\r\n    position: absolute;\r\n    left: 8px;\r\n    top: 0px;\r\n    color: #fff; \r\n    content: '\\2714'; \r\n    font-size: 10px;\r\n} \r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<p><input type=\"checkbox\" id=\"chk1\" name=\"chkdemo\"   checked><label for=\"chk1\"><\/label> Checked<\/p> \r\n<p><input type=\"checkbox\" id=\"chk2\" name=\"chkdemo\"  ><label for=\"chk2\"><\/label> UnChecked<\/p>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
See the complete code including checkbox CSS in the demo page.<\/p>\n
CSS Style 2 for the checkbox<\/strong><\/h3>\n
The following checkbox is a green colored theme with dark green border. When checked, it is relatively dark green than in unchecked state. The borders are less rounded than above example.<\/p>\n
\"HTML<\/p>\n
CSS<\/strong><\/p>\n
<style>\r\ninput[type=checkbox] {\r\n    display: none;\r\n}\r\n\r\ninput[type=checkbox] + label {\r\n    display: inline-block;\r\n    position: relative;\r\n    padding: 8px;\r\n    background-color: #A7D8A7;\r\n    border: 1px dotted #1E441E;\r\n    border-radius: 4px;\r\n    \r\n}\r\n\r\ninput[type=checkbox]:checked + label {\r\n    background-color: #5CB85C;\r\n    color: #A4B7C6;\r\n}\r\n\r\ninput[type=checkbox]:checked + label:after {\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 0px;\r\n    color: #fff; \r\n    content: '\\2714'; \r\n    font-size: 10px;\r\n} \r\n<\/style><\/pre>\n
Rounded checkbox with reddish theme<\/strong><\/h3>\n
This is a\u00a0rounded checkbox where I used red colors for border, checked and unchecked states. See the live demo and code online by clicking the image or link below:<\/p>\n
\"HTML<\/p>\n
Online demo<\/a><\/h6>\n
Larger checkbox with thicker tick mark<\/strong><\/h3>\n
The following is a larger checkbox with thicker and different colored tick mark. You can change the properties of tick by changing this class in the code:<\/p>\n
\n
input[type=checkbox]:checked + label:after {<\/pre>\n
 <\/p><\/blockquote>\n
\"HTML<\/p>\n
CSS:<\/strong><\/p>\n
<style>\r\ninput[type=checkbox] {\r\n    display: none;\r\n}\r\n\r\ninput[type=checkbox] + label {\r\n    display: inline-block;\r\n    position: relative;\r\n    padding: 8px;\r\n    background-color: #564949;\r\n    border: 1px solid #3E0E0D;\r\n    border-radius: 2px;\r\n    width: 8px;\r\n    height: 6px;\r\n}\r\n\r\ninput[type=checkbox]:checked + label {\r\n    background-color: #564949;\r\n    color: #A4B7C6;\r\n}\r\n\r\ninput[type=checkbox]:checked + label:after {\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 0px;\r\n    color: #FFB200; \r\n    font-weight:900;\r\n    content: '\\2714'; \r\n    font-size: 18px;\r\n} \r\n<\/style><\/pre>\n
Similarly, you can change the properties and try a different style, colors etc by modifying the above code to match checkbox with the rest of form elements in your web project that uses pure CSS\/CSS3.<\/p>\n
Credit:<\/strong> This Github page<\/a><\/p>\n
A demo of using Bootstrap based plug-in to create checkbox<\/strong><\/h3>\n
If you are working in Bootstrap framework for your project then there is a nice plug-in for creating beautiful checkboxes.<\/p>\n
The plug-in is awesome-bootstrap-checkbox<\/em> which is explained in Bootstrap checkbox tutorial\u00a0here<\/a>. See the demo online with code where I created a few checkboxes by using this plug-in<\/p>\n
\"HTML<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
You can use all the above CSS-styled plug-ins in HTML forms just like shown in the first three examples. The PHP or some other scripting can be used to access its value and perform the action accordingly.<\/p>\n","protected":false},"excerpt":{"rendered":"
The checkbox tag In HTML, you can create a checkbox by using the <input> tag and specify the type = checkbox, as shown in the syntax below: <input type=\u201dcheckbox\u201d name=\u201dcheckboxName\u201d value=\u201dValue_of_checkbox\u201d> In this tutorial, I will show you how you can create checkboxes in HTML forms. I will also explain how you may style checkboxes … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":988,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[32,30],"yoast_head":"\nHow to Create and Style HTML Checkbox with pure CSS and a plug-in<\/title>\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.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create and Style HTML Checkbox with pure CSS and a plug-in\" \/>\n<meta property=\"og:description\" content=\"The checkbox tag In HTML, you can create a checkbox by using the <input> tag and specify the type = checkbox, as shown in the syntax below: <input type=\u201dcheckbox\u201d name=\u201dcheckboxName\u201d value=\u201dValue_of_checkbox\u201d> In this tutorial, I will show you how you can create checkboxes in HTML forms. I will also explain how you may style checkboxes ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-25T09:04:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-12T10:00:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/02\/4.0_8-HTML-checkbox-bootstrap.png\" \/>\n\t<meta property=\"og:image:width\" content=\"170\" \/>\n\t<meta property=\"og:image:height\" content=\"214\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/\",\"url\":\"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/\",\"name\":\"How to Create and Style HTML Checkbox with pure CSS and a plug-in\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-02-25T09:04:42+00:00\",\"dateModified\":\"2023-10-12T10:00:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create and Style HTML Checkbox with pure CSS and a plug-in\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create and Style HTML Checkbox with pure CSS and a plug-in","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.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/","og_locale":"en_US","og_type":"article","og_title":"How to Create and Style HTML Checkbox with pure CSS and a plug-in","og_description":"The checkbox tag In HTML, you can create a checkbox by using the <input> tag and specify the type = checkbox, as shown in the syntax below: <input type=\u201dcheckbox\u201d name=\u201dcheckboxName\u201d value=\u201dValue_of_checkbox\u201d> In this tutorial, I will show you how you can create checkboxes in HTML forms. I will also explain how you may style checkboxes ... Read more","og_url":"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/","article_published_time":"2016-02-25T09:04:42+00:00","article_modified_time":"2023-10-12T10:00:30+00:00","og_image":[{"width":170,"height":214,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/02\/4.0_8-HTML-checkbox-bootstrap.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/","url":"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/","name":"How to Create and Style HTML Checkbox with pure CSS and a plug-in","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-02-25T09:04:42+00:00","dateModified":"2023-10-12T10:00:30+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"How to Create and Style HTML Checkbox with pure CSS and a plug-in"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/980"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=980"}],"version-history":[{"count":10,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/980\/revisions"}],"predecessor-version":[{"id":10688,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/980\/revisions\/10688"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/988"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}