Ajax Loader
×

CSS Switches

Flat CSS switches.

A number of tricks borrowed from http://cssdeck.com/labs/niy48rij including:

input:checked ~ input ~ ... /* matches only when first option is checked */

input ~ input:checked ~ ... /* matches only when second option is checked */

... and ...

positioning inputs on top of each other and using z-index so that clicking on the inputs always switches the selected option:

input z-index 2

input:checked z-index 1

** For some reason, using .switch--no-label and .switch--expanding-inner on the same element causes some problems. Any idea why this would be? **

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS Switches

    CSSDeck G+