Skip to content

Instantly share code, notes, and snippets.

@arnabdas
Created August 1, 2013 08:19
Show Gist options
  • Save arnabdas/6129473 to your computer and use it in GitHub Desktop.
Save arnabdas/6129473 to your computer and use it in GitHub Desktop.
Stylized Checkbox in AngularJS
.checkbox {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url("data:image/png;base64,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") no-repeat;
display: block;
background-position: 0px 0px;
clear: left;
float: left;
}
.checkbox_checked {
background-position: 0px -50px;
}
.checkbox_unChecked {
background-position: 0px 0px;
}
<span class="checkbox"
ng-class="{checkbox_checked: isChecked, checkbox_unChecked: !isChecked}"
ng-click="isChecked=!isChecked"
ng-model="isChecked">
</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment