Last active
July 3, 2017 09:51
-
-
Save ugumerie/e21eabbb1b348fc55101d73a45fb5c97 to your computer and use it in GitHub Desktop.
Custom Checkbox - Just CSS no Javascript and some CSS animations when clicked to check
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <form> | |
| <!--You can click the label and the checkbox will be checked because the checkbox is inside the label--> | |
| <label> | |
| <input type="checkbox" name="check" /> | |
| <span class="label-text">Item One</span> | |
| </label> | |
| <br/> | |
| <label> | |
| <input type="checkbox" name="check" /> | |
| <span class="label-text">Item Two</span> | |
| </label> | |
| <br/> | |
| <label> | |
| <input type="checkbox" name="check" disabled/> | |
| <span class="label-text">Item Three</span> | |
| </label> | |
| </form> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"; | |
| body { | |
| padding: 50px; | |
| } | |
| label { | |
| cursor: pointer; | |
| color: #666; | |
| } | |
| label input[type="checkbox"] { | |
| display: none; | |
| } | |
| label input[type="checkbox"] + .label-text:before { | |
| content: "\f096"; | |
| /*Some house keeping stuff*/ | |
| font-family: "FontAwesome"; | |
| speak: none; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| width: 1em;/*the area of the fonts to be the same size */ | |
| margin-right: 5px; | |
| } | |
| label input[type="checkbox"]:checked + .label-text:before { | |
| content: "\f14a"; | |
| color: #06a3e9; | |
| animation: tick 180ms ease-in; | |
| } | |
| label input[type="checkbox"]:disabled + .label-text { | |
| color: #aaa; | |
| } | |
| label input[type="checkbox"]:disabled + .label-text:before { | |
| content: "\f0c8"; | |
| color: #ccc; | |
| } | |
| /*Animation when checked*/ | |
| @keyframes tick { | |
| 0% { | |
| transform: scale(0); | |
| } | |
| 90% { | |
| transform: scale(1.4); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment