Building stupid things with :checked

Ryan Seddon

ME

The checkbox is pretty boring...

Incorrect

+ :checked = Awesome

Interaction without JavaScript

Stateful CSS, makes for something unexpected be extremely powerful

Custom Checkboxes/Radios

Original demo by Simurai

Quite easy

<input type="radio" name="opts" id="opts1">
<label for="opts1">Option</label>

Setup the styles to react to label clicks

input + label {
 background-position: 50px 0;
}
input:checked + label {
 background-position: 0 0;
}
input:checked ~ input + label {
 background-position: -50px 0;
}

Shiny dot

input + label {
    /* less interesting styles */
    background-image: radial-gradient(hsla(200, 100%, 90%, 1) 0%,
                        hsla(200, 100%, 70%, 1) 15%,
                        hsla(200, 100%, 60%, 0.3) 28%,
                        hsla(200, 100%, 30%, 0) 70%);
    border-radius: 25px;
    box-shadow: hsla(0, 0%, 100%, 0.15) 0 1px 1px,
                inset hsla(0, 0%, 0%, 0.5) 0 0 0 1px;
    transition: background-position 0.15s cubic-bezier(0.8, 0, 1, 1);
}

Wrote an article about this technique

Tree menu

See demo

Tree markup

<ol>
  <li>
    <input type="checkbox" checked id="folder1" />
    <label for="folder1" onclick>Folder 1</label>
    <ol>
       <li>File</li>
    </ol>
  </li>
  ... more items
</ol>

CSS, heavily simplified

.tree li input:checked ~ ol {
    height: auto;
    padding: 0 0 0 35px;
}
.tree li label:after, .tree li label:before,
.tree li input:checked ~ ol:before {
    background: url(icon-sprite.png) 0 0 no-repeat;
    content: "";
    height: 14px;
    width: 14px;
}
.tree li input ~ ol > li { display: none; }
.tree li input:checked ~ ol > li { display: block; }

Wrote an article on this too!

Snorefest

bootleg.css

A dodgy version of bootstrap plugins

Carousel

There's a lot going on in this, so...

This slide deck is powered by :checked

Introducing Slideshowbob

The Carousel and slideshowbob
work almost the same

Let's jump to the editor!

Or go to github and checkout the source code.

Quirks & Bugs

Labels and iOS5 requires empty onclick

<input type="checkbox" id="foo">
<label onclick="" for="foo">I need an onclick in iOS</label>

<=iOS5 will not update a checkboxes state when touching a label, but adding an onclick attribute works.

Downsides

Accessibility issues

Confusing markup when consumed through a screenreader

Sometimes* require specific placement of markup

* and by sometimes I mean most of the time...

Overly complex selectors

Look at the Carousel CSS +/~ all over

Browser support

Basic:
Firefox Chrome Opera Safari IE
1+ 2+ 9.2+ 3.2+ 9+
Fancy:
16+ 22+ 12+ 6+ 10+

Thanks!