umbrUI is a demo of HTML <input> elements styled with CSS3. 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.

Live demo (Safari or Chrome).

  1. impactoptico reblogged this from simurai
  2. simurai posted this
simurai simurai

I’m a UIX Designer and like to experiment with CSS3. This site is my personal playground.

About
Contact