{"id":621,"date":"2019-04-05T14:18:41","date_gmt":"2019-04-05T17:18:41","guid":{"rendered":"https:\/\/benjaminray.com\/codebase\/?p=621"},"modified":"2021-01-12T11:18:11","modified_gmt":"2021-01-12T15:18:11","slug":"fancy-checkboxes-and-toggle-switches","status":"publish","type":"post","link":"https:\/\/benjaminray.com\/codebase\/fancy-checkboxes-and-toggle-switches\/","title":{"rendered":"Fancy Checkboxes and Toggle Switches"},"content":{"rendered":"<p>This allows you to replace default checkboxes with a nicer-looking custom font alternative. This example uses Font Awesome 4 icons, but the CSS could easily be modified to use any font.  For the code below to work as-is, Font Awesome 4 must already be available on the page.<\/p>\n<p>This example uses two types of icons:<\/p>\n<div class=\"br-row\" style=\"max-width: 400px; margin-left: 30px; margin-bottom: 30px;\">\n<div class=\"br-half-sm\">\nFancy Checkbox<br \/>\n<small>class: fancy-checkbox<\/small><br \/>\n<img decoding=\"async\" src=\"https:\/\/benjaminray.com\/codebase\/wp-content\/uploads\/2019\/04\/fancy-checkbox.png\" alt=\"Fancy Checkbox\" \/>\n<\/div>\n<div class=\"br-half-sm\">\nFancy Toggle Switch<br \/>\n<small>class: fancy-checkbox-toggle<\/small><br \/>\n<img decoding=\"async\" src=\"https:\/\/benjaminray.com\/codebase\/wp-content\/uploads\/2019\/04\/fancy-checkbox-toggle.png\" alt=\"Fancy Checkbox - Toggle\" \/>\n<\/div>\n<\/div>\n<p>HTML &amp; CSS are included below for native checkboxes, and further down there is a separate section containing the HTML &amp; CSS for ASP.Net WebForms CheckBox and CheckBoxList controls.<\/p>\n<h2>Native HTML Checkbox<\/h2>\n<p>Fancy Checkbox:<\/p>\n<pre><code>&lt;label class=\"fancy-checkbox\"&gt;\n    &lt;input type=\"checkbox\" id=\"chkTest\" value=\"1\" name=\"chkTest\" \/&gt;\n    &lt;label for=\"chkTest\"&gt;Check Box&lt;\/label&gt;\n&lt;\/label&gt;\n<\/code><\/pre>\n<p>Fancy Toggle Switch:<\/p>\n<pre><code>&lt;label class=\"fancy-checkbox-toggle\"&gt;\n    &lt;input type=\"checkbox\" id=\"chkTest\" value=\"1\" name=\"chkTest\" \/&gt;\n    &lt;label for=\"chkTest\"&gt;Toggle Switch&lt;\/label&gt;\n&lt;\/label&gt;\n<\/code><\/pre>\n<p>Fancy Checkbox CSS:<\/p>\n<pre><code>.fancy-checkbox {\n    position: relative;\n    display: block;\n    padding: 0 0 0 20px;\n    margin: 0;\n    cursor: pointer;\n    \/* Make text &amp; control un-selectable, otherwise it will\n       sometimes get selected if the user repeatedly clicks quickly *\/\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n.fancy-checkbox input {\n    display: none;\n}\n\n.fancy-checkbox label {\n    cursor: pointer;\n    padding-left: 0;\n}\n\n.fancy-checkbox input[type=\"checkbox\"] + label:before {\n    position: absolute;\n    top: 1px;\n    left: 0;\n    font-family: FontAwesome;\n    content: \"\\f096\";\n    font-size: 20px;\n    line-height: 1;\n    color: #aaa;\n}\n\n.fancy-checkbox input[type=\"checkbox\"]:checked + label:before {\n    content: \"\\f14a\";\n    color: #4285f4;\n}\n<\/code><\/pre>\n<p>Fancy Toggle Switch CSS:<\/p>\n<pre><code>.fancy-checkbox-toggle {\n    position: relative;\n    display: block;\n    padding: 0 0 0 29px;\n    margin: 0;\n    cursor: pointer;\n    \/* Make text &amp; control un-selectable, otherwise it will\n       sometimes get selected if the user repeatedly clicks quickly *\/\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n.fancy-checkbox-toggle input {\n    display: none;\n}\n\n.fancy-checkbox-toggle label {\n    cursor: pointer;\n    padding-left: 0;\n}\n\n.fancy-checkbox-toggle input[type=\"checkbox\"] + label:before {\n    position: absolute;\n    top: -1px;\n    left: 0;\n    font-family: FontAwesome;\n    content: \"\\f204\";\n    font-size: 22px;\n    line-height: 1;\n    color: #aaa;\n}\n\n.fancy-checkbox-toggle input[type=\"checkbox\"]:checked + label:before {\n    content: \"\\f205\";\n    color: #4285f4;\n}\n<\/code><\/pre>\n<h2>ASP.Net CheckBox &amp; CheckBoxList Controls<\/h2>\n<p>HTML for Fancy Checkbox (renders in a span):<\/p>\n<pre><code>&lt;asp:CheckBox ID=\"chkSelect\" runat=\"server\" Text=\"Check Box\" CssClass=\"fancy-checkbox\"\/&gt;\n<\/code><\/pre>\n<p>HTML for Fancy Checkboxes in a CheckBoxList (renders in a table):<\/p>\n<pre><code>&lt;asp:CheckBoxList ID=\"CheckBoxList1\" runat=\"server\" CssClass=\"fancy-checkbox\"&gt;\n    &lt;asp:ListItem Selected=\"true\"&gt;People&lt;\/asp:ListItem&gt;\n    &lt;asp:ListItem&gt;Animals&lt;\/asp:ListItem&gt;\n    &lt;asp:ListItem Enabled=\"false\"&gt;Scientists&lt;\/asp:ListItem&gt;\n&lt;\/asp:CheckBoxList&gt;\n<\/code><\/pre>\n<p>HTML for Fancy Toggle Switch (renders in a span):<\/p>\n<pre><code>&lt;asp:CheckBox ID=\"chkSelect\" runat=\"server\" Text=\"Toggle Switch\" CssClass=\"fancy-checkbox-toggle\"\/&gt;\n<\/code><\/pre>\n<p>HTML for Fancy Toggle Switches in a CheckBoxList (renders in a table):<\/p>\n<pre><code>&lt;asp:CheckBoxList ID=\"CheckBoxList1\" runat=\"server\" CssClass=\"fancy-checkbox-toggle\"&gt;\n    &lt;asp:ListItem Selected=\"true\"&gt;People&lt;\/asp:ListItem&gt;\n    &lt;asp:ListItem&gt;Animals&lt;\/asp:ListItem&gt;\n    &lt;asp:ListItem Enabled=\"false\"&gt;Scientists&lt;\/asp:ListItem&gt;\n&lt;\/asp:CheckBoxList&gt;\n<\/code><\/pre>\n<p>Note: The <code>Text<\/code> property <strong>must<\/strong> be populated (<code>Text=\" \"<\/code> at minimum) for the ASP.Net CheckBox control so that the <code>&lt;label&gt;<\/code> tag is rendered inside the control. The fancy checkbox is rendered before the label using CSS <code>:before<\/code>, so the label must be present. If you do not populate the <code>Text<\/code> property, there will be nothing to replace the hidden native checkbox.<\/p>\n<p>CSS for ASP.Net Fancy Checkbox (in CheckBox and CheckBoxList Controls):<\/p>\n<pre><code>\/* ASP.Net CheckBox Control - Rendered in a SPAN *\/\nspan.fancy-checkbox {\n    position: relative;\n    display: block;\n    padding: 0 0 0 20px;\n    cursor: pointer;\n    \/* Make text &amp; control un-selectable, otherwise it will\n       sometimes get selected if the user repeatedly clicks quickly *\/\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n\/* ASP.Net CheckBoxList - Rendered in a TABLE *\/\ntable.fancy-checkbox td {\n    position: relative;\n    padding-left: 20px;\n    \/* Make text &amp; control un-selectable, otherwise it will\n       sometimes get selected if the user repeatedly clicks quickly *\/\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n.fancy-checkbox input {\n    display: none;\n}\n\n.fancy-checkbox label {\n    cursor: pointer;\n    padding-left: 0;\n}\n\n.fancy-checkbox input[type=\"checkbox\"] + label:before {\n    position: absolute;\n    top: 1px;\n    left: 0;\n    font-family: FontAwesome;\n    content: \"\\f096\";\n    font-size: 20px;\n    line-height: 1;\n    color: #aaa;\n}\n\n.fancy-checkbox input[type=\"checkbox\"]:checked + label:before {\n    content: \"\\f14a\";\n    color: #4285f4;\n    font-size: 18px; \/* Shrink checked icon slightly to match unchecked *\/\n}\n\n.fancy-checkbox input[type=\"checkbox\"]:disabled + label:before {\n    color: #ccccdd;\n}\n\n.fancy-checkbox.aspNetDisabled label,\n.fancy-checkbox .aspNetDisabled label {\n    cursor: not-allowed;\n}\n<\/code><\/pre>\n<p>CSS for ASP.Net Fancy Toggle Switch (in CheckBox and CheckBoxList Controls):<\/p>\n<pre><code>span.fancy-checkbox-toggle {\n    position: relative;\n    display: block;\n    padding: 0 0 0 29px;\n    cursor: pointer;\n    \/* Make text &amp; control un-selectable, otherwise it will\n       sometimes get selected if the user repeatedly clicks quickly *\/\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n\/* ASP.Net CheckBoxList - Rendered in a TABLE *\/\ntable.fancy-checkbox-toggle td {\n    position: relative;\n    padding-left: 29px;\n    \/* Make text &amp; control un-selectable, otherwise it will\n       sometimes get selected if the user repeatedly clicks quickly *\/\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n.fancy-checkbox-toggle input {\n    display: none;\n}\n\n.fancy-checkbox-toggle label {\n    cursor: pointer;\n    padding-left: 0;\n    font-weight: normal;\n}\n\n.fancy-checkbox-toggle input[type=\"checkbox\"] + label:before {\n    position: absolute;\n    top: -1px;\n    left: 0;\n    font-family: FontAwesome;\n    content: \"\\f204\";\n    font-size: 22px;\n    line-height: 1;\n    color: #aaa;\n}\n\n.fancy-checkbox-toggle input[type=\"checkbox\"]:checked + label:before {\n    content: \"\\f205\";\n    color: #4285f4;\n}\n\n.fancy-checkbox-toggle input[type=\"checkbox\"]:disabled + label:before {\n    color: #ccccdd;\n}\n\n.fancy-checkbox-toggle.aspNetDisabled label,\n.fancy-checkbox-toggle .aspNetDisabled label {\n    cursor: not-allowed;\n}\n<\/code><\/pre>\n<hr \/>\n<p>Based on the following article: <a href=\"http:\/\/thatwebdude.com\/tutorial\/bigger-html-checkboxes-with-font-awesome-and-css\/\" rel=\"noopener noreferrer\" target=\"_blank\">http:\/\/thatwebdude.com\/tutorial\/bigger-html-checkboxes-with-font-awesome-and-css\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This allows you to replace default checkboxes with a nicer-looking custom font alternative. This example uses Font Awesome 4 icons, but the CSS could easily be modified to use any  [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[13,16],"tags":[],"class_list":["post-621","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-css"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9GNjN-a1","jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/comments?post=621"}],"version-history":[{"count":38,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/621\/revisions"}],"predecessor-version":[{"id":1194,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/621\/revisions\/1194"}],"wp:attachment":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/media?parent=621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/categories?post=621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/tags?post=621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}