CSS - Checkbox Image

by johnpapa

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<section class="row">
    <!-- ko foreach:pastries -->
    <article class="span3">
        <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: 32px;
}

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

article{
    height: 48px;
    border: 1px solid whitesmoke;
    padding: 4px 20px;
    min-width: 150px;
}

article:hover{
    cursor: pointer;
    background: #14649E;
    color: white;
}

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

[class*="span"] {
    float: left;
    margin-left: 18px;
    margin-top: 18px;
}




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

/* input[type=checkbox]:checked + label, */
label > input[type=checkbox]:checked + span
{
   background: url(http://johnpapa.net/files/downloads/images/bookmarkchecked.png);
   *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;
}



/* responsive */
@media (max-width: 480px) {
    article > span {
        font-size: 100%;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    article > span {
        font-size: 120%;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    article > span {
        font-size: 140%;
    }
}

@media (min-width: 980px) {
    article > span {
        font-size: 180%;
    }
}

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);