#96 🔫 I hate CSS - player Stats custom checkboxes implemented

client/public/views/partials/playerStats.html

@@ -122,9 +122,8 @@ <h2>All Player Stats</h2>
 				<td class="rank">{{player.rank}}</td>
 				<td class="compare-check">
 					<div class="checkbox-container">
-						<label for="checkbox-{{$index}}" class="checkbox-label">
-							<input value="{{player.id}}" name="checkbox-{{$index}}" id="checkbox-{{$index}}"type="checkbox" ng-model="player.selected" ng-click="addPlayerToCompare(player.id)"/>
-						</label>
+						<input value="{{player.id}}" name="checkbox-{{$index}}" id="checkbox-{{$index}}"type="checkbox" ng-model="player.selected" ng-click="addPlayerToCompare(player.id)"/>
+						<label for="checkbox-{{$index}}" class="checkbox-label"></label>
 					</div>
 				</td>
 			</tr>

client/stylus/playerStats.styl

@@ -88,15 +88,26 @@
 						vertical-align middle
 
 					.checkbox-container
+						position relative
 						label
 							display block
 							width 100%
 							height 100%
-							position relative
-							input
-								position absolute
-								bottom 50%
-								right 40%
+							cursor pointer
+						input[type="checkbox"]
+							position absolute
+							opacity 0
+							top 0
+							left 0
+						input[type="checkbox"] + label
+							background url("/assets/img/checkbox-uncheck.png") no-repeat
+							background-position-x 66px
+							background-position-y 18px
+
+						input[type="checkbox"]:checked + label
+							background url("/assets/img/checkbox-check.png") no-repeat
+							background-position-x 66px
+							background-position-y 18px
 
 	.profile-img-name
 		img