Creating Custom Flat and Flipping Style CSS Checkboxes

Published February 25, 2015 by saurav.roy.

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.

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’t fit in the websites’ modern and clean design. So, designers create their own stylish checkboxes or, in other words, toggle switches.

There’s no pure CSS way to style a generic checkbox. It’s an element whose style is managed by the browser engine, so different browsers would display the checkboxes differently. Wouldn’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’s get started!

Flat Switch

Flip Switch

Setting the Basics:
We’ll use the standard checkbox input with a label, and then we’ll wrap those label/input combinations inside a div. 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’t need class names of their own.

   <div class="block-switch">
      <input id="toggle-flat" class="toggle toggle-flat" type="checkbox">
      <label for="toggle-flat"></label>
      <h4>Flat Switch</h4>
    </div>

    <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>
      <h4>Flip Switch</h4>
   </div>

For the CSS, we want the actual checkbox to be hidden, so, w’ll apply all the styling we want on the label. So clicking on the label will actually “check” or “uncheck” the checkbox. Here’s what we will achieve:

input.toggle {
  position: absolute;
  visibility: hidden;
}

input.toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Writing the style for the switch (Flat):

The label 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 :before pseudo element to simulate the inner background of the switch which switches from red to green depending on the state. The :after pseudo element will be the white button that sits on top and slides from left to right on click. We’ll change the background color of the :before pseudo element and the position of the :after pseudo element when the input takes on the pseudo class :checked, and everything will transition smoothly. Just as follows:

input.toggle-flat + label:before,
input.toggle-flat + label:after{
  display: block;
  position: absolute;
  content: "";
}
input.toggle-flat + label {
  width: 100px;
  height: 20px;
  background-color: #BF2A23;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}
input.toggle-flat + label:before{
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}
input.toggle-flat+label:after{
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 45px;
  background-color: #fff;
  -webkit-transition: margin 0.5s, background 0.5s;
  -moz-transition: margin 0.5s, background 0.5s;
  -o-transition: margin 0.5s, background 0.5s;
  transition: margin 0.5s, background 0.5s;
}
input.toggle-flat:checked+label {
  background-color:#00C176;
}
input.toggle-flat:checked+label:after {
  margin-left: 47px;
  background-color:#fff;
}

Result:

Flat Switch

Writing the style for the switch (Flip):
Now that we’re done with the flat boxed switch. We’re going to create flip switch. The default view will be red with “OFF” text, and the checked view will be green with “ON” text. When the label is clicked, the switch will flip over, spinning 180 degrees on its x-axis, revealing the opposite side. We’re 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 :after and :before pseudo elements respectively. We’ll use backface-visibility property on the :after element, which initially hides its back side due to its starting point at -180 degrees. Just as follows:

input.toggle-flip + label {
  height: 20px;
}
input.toggle-flip + label:before, input.toggle-flip + label:after {
  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 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.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 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  transition: transform 0.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);
}

Result:

Flip Switch

Here is a codepen preview of everything put together!

That’s it! Now we created two flat design hope you enjoyed this tutorial.

Share and Enjoy !

0Shares
0 0

A Simple jQuery Stylesheet Switcher

Published April 2, 2009 by saurav.roy.

jQuery stylesheeet switcher

There are lots of reasons you might want to offer your users more than one CSS file for your website:

  • You want to offer a “stylish” low-contrast and an easy-to-read high-contrast version of your site.
  • You have many low-vision readers and want to give them easy access to a customized stylesheet with a larger typeface.
  • Your site is schizophrenic and you want to be able to change the look quickly.

Whatever the reason, it’s amazingly easy to create a function that swaps between multiple stylesheets using jQuery.

The first step of course is to build several different CSS files, which we’ll then swap between. Once that is done, we can dive into the XHTML and jQuery that makes the magic happen. Read On…

Share and Enjoy !

0Shares
0 0