Checkboxes and the ridiculous things you can do with them

Ryan Seddon

Me

The checkbox is pretty boring...

Incorrect!

+ :checked = Awesome

What can checkboxes/radios do?

<h1>CSS3 Checkbox Styles</h1>

    <!-- Slide ONE -->
    <div class="slideOne">
        <input type="checkbox" value="None" id="slideOne" name="check" />
        <label for="slideOne"></label>
    </div>

    <!-- Slide TWO -->
    <div class="slideTwo">
        <input type="checkbox" value="None" id="slideTwo" name="check" />
        <label for="slideTwo"></label>
    </div>

    <!-- Slide THREE -->
    <div class="slideThree">
        <input type="checkbox" value="None" id="slideThree" name="check" />
        <label for="slideThree"></label>
    </div>

    <!-- Rounded ONE -->
    <div class="roundedOne">
        <input type="checkbox" value="None" id="roundedOne" name="check" />
        <label for="roundedOne"></label>
    </div>

    <!-- Rounded TWO -->
    <div class="roundedTwo">
        <input type="checkbox" value="None" id="roundedTwo" name="check" />
        <label for="roundedTwo"></label>
    </div>

    <!-- Squared ONE -->
    <div class="squaredOne">
        <input type="checkbox" value="None" id="squaredOne" name="check" />
        <label for="squaredOne"></label>
    </div>

    <!-- Squared TWO -->
    <div class="squaredTwo">
        <input type="checkbox" value="None" id="squaredTwo" name="check" />
        <label for="squaredTwo"></label>
    </div>

    <!-- Squared THREE -->
    <div class="squaredThree">
        <input type="checkbox" value="None" id="squaredThree" name="check" />
        <label for="squaredThree"></label>
    </div>

    <!-- Squared FOUR -->
    <div class="squaredFour">
        <input type="checkbox" value="None" id="squaredFour" name="check" />
        <label for="squaredFour"></label>
    </div>

Secret sauce


    // Off
    input[type="checkbox"] ~ div {
        // Fancy styles
    }

    // On
    input[type="checkbox"]:checked ~ div {
        // Fancy styles
    }

Gives you an "event" hook in CSS.

Thanks!