CSS - Checkbox Image - Simple

by johnpapa

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<section>
    <!-- ko foreach:pastries -->
    <article>
        <label><input type="checkbox"><span></span></label>
        <span data-bind="text:$data"></span>
    </article>
    <!-- /ko -->
</section>

CSS

body { 
    background: #dddddd; 
    margin:20px; 
    font-family:'Segoe UI Light', 'Segoe UI', 'Verdana';
    font-size: 18px;
}

input[type=checkbox] {
    display:none;
}

article{
    height: 48px;
    border: 1px solid whitesmoke;
    padding: 2px 20px;
    min-width: 160px;
    max-width: 240px;
}

article > span {
    float:left;
    line-height: 42px;
}

/* input[type=checkbox] + label, */
label > input[type=checkbox] + span
{
   background: url(http://johnpapa.net/files/downloads/images/bookmark.png);
   float:left;
   cursor: pointer;
   opacity: .6;
   padding: 0;
   height: 32px;
   width: 32px;
   margin:8px 8px 8px 0;
}

/* input[type=checkbox]:checked + label, */
label > input[type=checkbox]:checked + span
{
   background: url(http://johnpapa.net/files/downloads/images/bookmarkchecked.png);
   opacity: 1;
}

/* input[type=checkbox] + label:hover, */
label > input[type=checkbox] + span:hover
{
   opacity: .6;
}

JavaScript

var vm = (function() {
    var pastries = ko.observableArray(['Cake', 'Cookie', 'Cracker', 'Cannoli', 'Crepe', 'Cheesecake', 'Cream puff', 'Cheese danish', 'Cinnamon roll', 'Chocolate Ă©clair', 'Cherry pie', 'Croissant'].sort());
    return {
        pastries: pastries
    }
})();

ko.applyBindings(vm);