Created
March 31, 2018 10:29
-
-
Save andrew--r/975d8c977f58f3b2f2d2d092bdf5a841 to your computer and use it in GitHub Desktop.
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
:root { | |
--checkbox-size: 1em; | |
--checkbox-spacing: 0.5em; | |
--box-shadow-outline: 0 0 0 2px #3b99fc; | |
--box-shadow-press: inset 0 1px 1px 1px rgba(0, 0, 0, 0.15); | |
} | |
.checkbox { | |
position: relative; | |
padding-left: calc(var(--checkbox-size) + var(--checkbox-spacing)); | |
} | |
.checkbox__input, | |
.checkbox__box { | |
position: absolute; | |
top: calc((1em - var(--checkbox-size)) / 2); | |
left: 0; | |
} | |
.checkbox__input { | |
opacity: 0; | |
} | |
.checkbox__box { | |
width: var(--checkbox-size); | |
height: var(--checkbox-size); | |
background-color: #fff; | |
border: 1px solid #000; | |
border-radius: 3px; | |
} | |
.checkbox__input:focus~.checkbox__box { | |
box-shadow: var(--box-shadow-outline); | |
} | |
.checkbox__input:active:not(:disabled)~.checkbox__box { | |
box-shadow: var(--box-shadow-outline), var(--box-shadow-press); | |
background-color: rgba(0, 0, 0, 0.05); | |
} | |
.checkbox__input:checked~.checkbox__box { | |
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 40 40" width="40" height="40"><path d="M10 10l20 20m0-20L10 30" stroke="#000" stroke-width="2" fill="none"/></svg>'); | |
background-size: var(--checkbox-size); | |
} | |
.checkbox__input:disabled~.checkbox__box { | |
background-color: rgba(0, 0, 0, 0.1); | |
border-color: rgba(0, 0, 0, 0.5); | |
} |
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
<label class="checkbox"> | |
<input type="checkbox" class="checkbox__input"> | |
<span class="checkbox__box"></span> | |
Remember me | |
</label> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment