Skip to content

Instantly share code, notes, and snippets.

@dcollien

dcollien/fancy checkboxes and radio buttons

Last active December 20, 2015 21:19
Show Gist options
  • Save dcollien/6196340 to your computer and use it in GitHub Desktop.
Save dcollien/6196340 to your computer and use it in GitHub Desktop.
Download ZIP
fancy checkboxes and radio buttons in CSS falls back to ordinary checkboxes if type="checkbox" is not supported
Raw
fancy checkboxes and radio buttons
<!DOCTYPE html>
<style>
/* begin fancy checkbox and radio button css */
/* hide input elements we don't want to render. N.B. if type="checkbox" is not supported, this will
fall back to a normal checkbox */
label.input-fancy input[type="checkbox"], label.input-fancy input[type="radio"] {
display:none;
}
/* the sprite sheet and general layout of the boxes */
label.input-fancy input[type="checkbox"] + span:before, label.input-fancy input[type="radio"] + span:before {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAATCAYAAAA6T+sJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJCMTBBRTZGNzNGMTFFMjgyRjc4N0RBMkFDMkQwREUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJCMTBBRTVGNzNGMTFFMjgyRjc4N0RBMkFDMkQwREUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOERCQkFGRUVGNzI4RjBGRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOERCQkFGRUVGNzI4RjBGRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkMZuNEAAAX4SURBVHja7FhNbFRV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);
background-repeat: no-repeat;
content: '';
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
cursor:pointer;
}
/* the individual positions for each box type and state */
label.input-fancy input[type="checkbox"] + span:before {
background-position: 0px top;
}
label.input-fancy input[type="checkbox"]:checked + span:before {
background-position: -19px top;
}
label.input-fancy input[type="radio"] + span:before {
background-position: -38px top;
}
label.input-fancy input[type="radio"]:checked + span:before {
background-position: -57px top;
}
/* also change the text color when they're selected */
label.input-fancy input[type="checkbox"] + span, label.input-fancy input[type="radio"] + span {
color: #ab9;
}
label.input-fancy input[type="checkbox"]:checked + span, label.input-fancy input[type="radio"]:checked + span {
color: #ad8;
}
/* end fancy button css */
body {
margin-top: 80px;
margin-left: 80px;
font-family: sans-serif;
background-color: #444;
font-weight: 200;
}
form div {
margin: 8px;
}
</style>
<form>
<div>
<label class="input-fancy">
<input type="checkbox"> <span>Checkbox Text</span>
</label>
</div>
<div>
<label class="input-fancy">
<input type="checkbox" checked> <span>Checkbox Text</span>
</label>
</div>
<div>
<label class="input-fancy">
<input type="checkbox"> <span>Checkbox Text</span>
</label>
</div>
<div>
<label class="input-fancy">
<input type="radio" name="options" checked> <span>Radio Text A</span>
</label>
</div>
<div>
<label class="input-fancy">
<input type="radio" name="options"> <span>Radio Text B</span>
</label>
</div>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment