CodePen

HTML

            
              .help Please select some items
.container
    - (1..20).each do |i|
        %input.osx{:type=>"checkbox", :id=>"item#{i}"} 
        %label{:for=>"item#{i}"}
            Label of item no. #{i}
        .glue
            
          
!
via HTML Inspector

CSS

            
              $select-color:#416dd8;
$size:20px;
body{
  background:#e3e7ed;
}
.container{
  font-size:0;
  width:500px;
  border:1px solid #888;
  margin:0 auto;
  background:linear-gradient(#f3f6fa  50%, white 50%); 
  background-size:100% $size*2;
  background-position:0 2px;
  margin-top:20px;
  margin-bottom:20px;
  padding-left:3px;
  padding-right:3px;
  padding-top:2px;
  padding-bottom:2px;
  border-radius:3px;
  box-shadow:0 10px 40px 20px rgba(0,0,0,0.2);
}
.osx{
  display:none;
  
}
.osx+label{
  display:block;
  position:relative;
  width:100%;
  height:$size;
  line-height:$size;
  text-align:left;
  padding-left:$size;
  padding-right:$size;
  z-index:2;
  font-size:12px;
  vertical-align:top;
  cursor:pointer;
  box-sizing:border-box;
}

.glue{
  position:relative;
  display:block;
  z-index:1;
}
.osx:checked+label+.glue+.osx:checked+label+.glue:before{
  content:" ";
  display:block;
  position:absolute;
  height:$size;
  width:100%;
  background:$select-color;
  top:-$size - ($size/2);
  left:0;
}

.osx:checked+label{
  background:$select-color;
  border-radius:$size/2;
  color:white;
}

.help{
  width:500px;
  margin:0 auto;
  margin-top:20px;
  font-size:18px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................