{"id":1160,"date":"2015-02-25T08:35:12","date_gmt":"2015-02-25T14:35:12","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1160"},"modified":"2015-02-25T08:35:12","modified_gmt":"2015-02-25T14:35:12","slug":"creating-cool-flat-and-flipping-css-checkboxes","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/creating-cool-flat-and-flipping-css-checkboxes\/","title":{"rendered":"Creating Custom Flat and Flipping Style CSS Checkboxes"},"content":{"rendered":"<p><!-- Custom CSS Styles Block : Ahmed El-Shinawy--><\/p>\n<style media=\"screen\" type=\"text\/css\">\n.preview-block{position:relative;background:#f8f8f8;padding:20px;margin-bottom:20px;border:1px solid #dedede;text-align:center}.block-switch{position:relative;text-align:center;display:inline-block;margin:8px 20px 0 0;width:100px}.block-switch h4{margin:0;font-size:15px}input.toggle{position:absolute;visibility:hidden}input.toggle+label{display:block;position:relative;cursor:pointer;outline:0;user-select:none}input.toggle-flat+label{width:100px;height:20px;background-color:#BF2A23;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s}input.toggle-flat+label:after,input.toggle-flat+label:before{display:block;position:absolute;content:\"\"}input.toggle-flat+label:before{top:2px;left:2px;bottom:2px;right:2px;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s}input.toggle-flat+label:after{top:4px;left:4px;bottom:4px;width:45px;background-color:#fff;-webkit-transition:margin .5s,background .5s;-moz-transition:margin .5s,background .5s;-o-transition:margin .5s,background .5s;transition:margin .5s,background .5s}input.toggle-flat:checked+label{background-color:#00C176}input.toggle-flat:checked+label:after{margin-left:47px;background-color:#fff}input.toggle-flip+label{height:20px}input.toggle-flip+label:after,input.toggle-flip+label:before{position:absolute;left:0;bottom:0;right:0;width:100px;height:20px;color:#fff;text-align:center;line-height:20px}input.toggle-flip+label:before{background-color:#BF2A23;content:attr(data-off);-webkit-transition:-webkit-transform .5s;-moz-transition:-moz-transform .5s;-o-transition:-o-transform .5s;transition:transform .5s;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}input.toggle-flip+label:after{background-color:#00C176;color:#fff;content:attr(data-on);-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;-o-transition:-o-transform .4s;transition:transform .4s;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}input.toggle-flip:checked+label:before{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg)}input.toggle-flip:checked+label:after{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-ms-transform:rotateX(0);-o-transform:rotateX(0);transform:rotateX(0)}\n<\/style>\n<p><!-- Actual Post Starts Here--><\/p>\n<p>In this tutorial, we will create some flat style toggle switches purely using CSS. Those switches could be used instead of the generic, dull looking, checkboxes.<\/p>\n<p>Usually, while we are creating new websites, we use checkboxes to give users the option to select certain things on the site. Most of the time those standard checkboxes look dull: they just don\u2019t fit in the websites\u2019 modern and clean design. So, designers create their own stylish checkboxes or, in other words, toggle switches.<\/p>\n<p>There\u2019s no pure CSS way to style a generic checkbox. It\u2019s an element whose style is managed by the browser engine, so different browsers would display the checkboxes differently. Wouldn&#8217;t it be nice to have smoother. cleaner checkboxes? Using some CSS tricks can easily solve that problem, and by combining the :checked, :before, and :after pseudo classes with our checkbox input, you can achieve beautiful toggle switches with smooth transition effects. So let\u2019s get started!<\/p>\n<div class=\"preview-block\">\n<div class=\"block-switch\"><input id=\"toggle-flat\" class=\"toggle toggle-flat\" type=\"checkbox\" \/><label for=\"toggle-flat\"><\/label><\/p>\n<h4>Flat Switch<\/h4>\n<\/div>\n<div class=\"block-switch\"><input id=\"toggle-flip\" class=\"toggle toggle-flip\" type=\"checkbox\" \/><label for=\"toggle-flip\" data-on=\"Yes\" data-off=\"No\"><\/label><\/p>\n<h4>Flip Switch<\/h4>\n<\/div>\n<\/div>\n<p><strong>Setting the Basics:<\/strong><br \/>\nWe\u2019ll use the standard checkbox input with a label, and then we&#8217;ll wrap those label\/input combinations inside a <code>div<\/code>. Each style will be targeted by a class that is attached to the input element. Labels will be targeted using the input + label selector targeting so they don\u2019t need class names of their own.<\/p>\n<div class=\"codeBlock\">\n<pre>\n   &#60;div class=\"block-switch\"&#62;\n      &#60;input id=\"toggle-flat\" class=\"toggle toggle-flat\" type=\"checkbox\"&#62;\n      &#60;label for=\"toggle-flat\"&#62;&#60;\/label&#62;\n      &#60;h4&#62;Flat Switch&#60;\/h4&#62;\n    &#60;\/div&#62;\n\n    &#60;div class=\"block-switch\"&#62;\n      &#60;input id=\"toggle-flip\" class=\"toggle toggle-flip\" type=\"checkbox\"&#62;\n      &#60;label for=\"toggle-flip\" data-on=\"Yes\" data-off=\"No\"&#62;&#60;\/label&#62;\n      &#60;h4&#62;Flip Switch&#60;\/h4&#62;\n   &#60;\/div&#62;\n<\/pre>\n<\/div>\n<p>For the CSS, we want the actual checkbox to be hidden, so, w\u2019ll apply all the styling we want on the label. So clicking on the label will actually \u201ccheck\u201d or \u201cuncheck\u201d the checkbox. Here\u2019s what we will achieve:<\/p>\n<div class=\"codeBlock\">\n<pre>input.toggle {\n  position: absolute;\n  visibility: hidden;\n}\n\ninput.toggle + label {\n  display: block;\n  position: relative;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}<\/pre>\n<\/div>\n<p><strong>Writing the style for the switch (Flat):<\/strong><\/p>\n<p>The <code>label<\/code> will be the container of the style so we give it a background color, width and height to simulate the border. Then we use the <code>:before<\/code> pseudo element to simulate the inner background of the switch which switches from red to green depending on the state. The <code>:after<\/code> pseudo element will be the white button that sits on top and slides from left to right on click. We\u2019ll change the background color of the <code>:before<\/code> pseudo element and the position of the <code>:after<\/code> pseudo element when the input takes on the pseudo class <code>:checked<\/code>, and everything will transition smoothly. Just as follows:<\/p>\n<div class=\"codeBlock\">\n<pre>input.toggle-flat + label:before,\ninput.toggle-flat + label:after{\n  display: block;\n  position: absolute;\n  content: \"\";\n}\ninput.toggle-flat + label {\n  width: 100px;\n  height: 20px;\n  background-color: #BF2A23;\n  -webkit-transition: background 0.5s;\n  -moz-transition: background 0.5s;\n  -o-transition: background 0.5s;\n  transition: background 0.5s;\n}\ninput.toggle-flat + label:before{\n  top: 2px;\n  left: 2px;\n  bottom: 2px;\n  right: 2px;\n  -webkit-transition: background 0.5s;\n  -moz-transition: background 0.5s;\n  -o-transition: background 0.5s;\n  transition: background 0.5s;\n}\ninput.toggle-flat+label:after{\n  top: 4px;\n  left: 4px;\n  bottom: 4px;\n  width: 45px;\n  background-color: #fff;\n  -webkit-transition: margin 0.5s, background 0.5s;\n  -moz-transition: margin 0.5s, background 0.5s;\n  -o-transition: margin 0.5s, background 0.5s;\n  transition: margin 0.5s, background 0.5s;\n}\ninput.toggle-flat:checked+label {\n  background-color:#00C176;\n}\ninput.toggle-flat:checked+label:after {\n  margin-left: 47px;\n  background-color:#fff;\n}<\/pre>\n<\/div>\n<p><strong>Result:<\/strong><\/p>\n<div class=\"preview-block\">\n<div class=\"block-switch\"><input id=\"toggle-flat2\" class=\"toggle toggle-flat\" type=\"checkbox\" \/><label for=\"toggle-flat2\"><\/label><\/p>\n<h4>Flat Switch<\/h4>\n<\/div>\n<\/div>\n<p><strong>Writing the style for the switch (Flip):<\/strong><br \/>\nNow that we&#8217;re done with the flat boxed switch. We\u2019re going to create flip switch. The default view will be red with &#8220;OFF&#8221; text, and the checked view will be green with \u201cON\u201d text. When the label is clicked, the switch will flip over, spinning 180 degrees on its x-axis, revealing the opposite side. We\u2019re going to populate the content of the unchecked\/checked switch by using data-attributes. These data-attributes were specified in the HTML by data-on and data-off, each of which will populate the <code>:after<\/code> and <code>:before<\/code> pseudo elements respectively. We&#8217;ll use backface-visibility property on the <code>:after<\/code> element, which initially hides its back side due to its starting point at -180 degrees. Just as follows:<\/p>\n<div class=\"codeBlock\">\n<pre>input.toggle-flip + label {\n  height: 20px;\n}\ninput.toggle-flip + label:before, input.toggle-flip + label:after {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  width: 100px;\n  height: 20px;\n  color: #fff;\n  text-align: center;\n  line-height: 20px;\n}\ninput.toggle-flip + label:before {\n  background-color: #BF2A23;\n  content: attr(data-off);\n  -webkit-transition: -webkit-transform 0.5s;\n  -moz-transition: -moz-transform 0.5s;\n  -o-transition: -o-transform 0.5s;\n  transition: transform 0.5s;\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  -ms-backface-visibility: hidden;\n  -o-backface-visibility: hidden;\n  backface-visibility: hidden;\n}\ninput.toggle-flip + label:after {\n  background-color: #00C176;\n  color:#fff;\n  content: attr(data-on);\n  -webkit-transition: -webkit-transform 0.4s;\n  -moz-transition: -moz-transform 0.4s;\n  -o-transition: -o-transform 0.4s;\n  transition: transform 0.4s;\n  -webkit-transform: rotateX(180deg);\n  -moz-transform: rotateX(180deg);\n  -ms-transform: rotateX(180deg);\n  -o-transform: rotateX(180deg);\n  transform: rotateX(180deg);\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  -ms-backface-visibility: hidden;\n  -o-backface-visibility: hidden;\n  backface-visibility: hidden;\n}\ninput.toggle-flip:checked + label:before {\n  -webkit-transform: rotateX(180deg);\n  -moz-transform: rotateX(180deg);\n  -ms-transform: rotateX(180deg);\n  -o-transform: rotateX(180deg);\n  transform: rotateX(180deg);\n}\ninput.toggle-flip:checked + label:after {\n  -webkit-transform: rotateX(0);\n  -moz-transform: rotateX(0);\n  -ms-transform: rotateX(0);\n  -o-transform: rotateX(0);\n  transform: rotateX(0);\n}<\/pre>\n<\/div>\n<p><strong>Result:<\/strong><\/p>\n<div class=\"preview-block\">\n<div class=\"block-switch\"><input id=\"toggle-flip2\" class=\"toggle toggle-flip\" type=\"checkbox\" \/><label for=\"toggle-flip2\" data-on=\"Yes\" data-off=\"No\"><\/label><\/p>\n<h4>Flip Switch<\/h4>\n<\/div>\n<\/div>\n<p>Here is a <a href=\"http:\/\/codepen.io\/anon\/pen\/wBjRQa\" title=\"Codepen Preview\" target=\"_blank\" rel=\"noopener noreferrer\">codepen preview<\/a> of everything put together!<\/p>\n<p>That\u2019s it! Now we created two flat design hope you enjoyed this tutorial.<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<\/p>\n<p>.preview-block{position:relative;background:#f8f8f8;padding:20px;margin-bottom:20px;border:1px solid #dedede;text-align:center}.block-switch{position:relative;text-align:center;display:inline-block;margin:8px 20px 0 0;width:100px}.block-switch h4{margin:0;font-size:15px}input.toggle{position:absolute;visibility:hidden}input.toggle+label{display:block;position:relative;cursor:pointer;outline:0;user-select:none}input.toggle-flat+label{width:100px;height:20px;background-color:#BF2A23;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s}input.toggle-flat+label:after,input.toggle-flat+label:before{display:block;position:absolute;content:&#8221;&#8221;}input.toggle-flat+label:before{top:2px;left:2px;bottom:2px;right:2px;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s}input.toggle-flat+label:after{top:4px;left:4px;bottom:4px;width:45px;background-color:#fff;-webkit-transition:margin .5s,background .5s;-moz-transition:margin .5s,background .5s;-o-transition:margin .5s,background .5s;transition:margin .5s,background .5s}input.toggle-flat:checked+label{background-color:#00C176}input.toggle-flat:checked+label:after{margin-left:47px;background-color:#fff}input.toggle-flip+label{height:20px}input.toggle-flip+label:after,input.toggle-flip+label:before{position:absolute;left:0;bottom:0;right:0;width:100px;height:20px;color:#fff;text-align:center;line-height:20px}input.toggle-flip+label:before{background-color:#BF2A23;content:attr(data-off);-webkit-transition:-webkit-transform .5s;-moz-transition:-moz-transform .5s;-o-transition:-o-transform .5s;transition:transform .5s;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}input.toggle-flip+label:after{background-color:#00C176;color:#fff;content:attr(data-on);-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;-o-transition:-o-transform .4s;transition:transform .4s;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}input.toggle-flip:checked+label:before{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg)}input.toggle-flip:checked+label:after{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-ms-transform:rotateX(0);-o-transform:rotateX(0);transform:rotateX(0)}<\/p>\n<p>In this tutorial, we will create some flat style toggle [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/creating-cool-flat-and-flipping-css-checkboxes\/\" title=\"Click to read 'Creating Custom Flat and Flipping Style CSS Checkboxes'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[165],"tags":[219,79,267,268,357,367,372],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1160"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1160"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1160\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}