umbrUI

umbrUI is a demo of HTML <input> elements styled with CSS. There are: No images, no extra markup and no JavaScript.

If you use appearance: none, it will remove the default styles and you’re free to add your own.

input[type="checkbox"] {
    -webkit-appearance:none; /* Remove default styles */
    /* Add your own styles */
}

So I used as many of the :before and :after pseudo elements as possible and well as the Shadow DOM elements.

Browser support: WebKit for now.

Credits: The Rocker switch (checkbox) is based on Mike Bernardo’s original design.

See the demo (Safari or Chrome).