Created
August 30, 2012 04:34
-
-
Save boazsender/3522354 to your computer and use it in GitHub Desktop.
Mobile CSS checkboxes
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
input[type=checkbox] { | |
outline: none; | |
width: 58px; | |
height: 23px; | |
font-size: 11px; | |
line-height: 2; | |
display: block; | |
font-weight: bold; | |
border-radius: 3px; | |
border: 1px solid #B9B9B9; | |
-webkit-appearance: none; | |
background-image: -webkit-gradient( | |
linear, left top, left bottom, | |
color-stop(0, #E8E8E8), | |
color-stop(0.5, #E8E8E8), | |
color-stop(0.5, #FDFDFD), | |
color-stop(1, #FDFDFD) | |
); | |
box-shadow: 0px 1px 2px #AFAFAF inset; | |
color: #7F7F7F; | |
} | |
input[type=checkbox]:checked { | |
background-image: -webkit-gradient( | |
linear, left top, left bottom, | |
color-stop(0, #367EF8), | |
color-stop(0.5, #367EF8), | |
color-stop(0.5, #66A3F8), | |
color-stop(1, #66A3F8) | |
); | |
box-shadow: 0px 1px 2px #1449A3 inset; | |
color: #fff; | |
text-shadow: 0px -1px 1px #000; | |
border: 1px solid #99B9E8; | |
} | |
input[type=checkbox]:before { | |
content: 'OFF'; | |
border-radius: 3px; | |
border-top: 1px solid #F7F7F7; | |
border-right: 1px solid #999999; | |
border-bottom: 1px solid: #BABABA; | |
border-left: 1px solid #BDBDBD; | |
background-image: -webkit-gradient( | |
linear, left top, left bottom, | |
color-stop(0, #D8D8D8), | |
color-stop(1, #FBFBFB) | |
); | |
height: 20px; | |
width: 22px; | |
display: inline-block; | |
text-indent: 27px; | |
} | |
input[type=checkbox]:checked:before { | |
content: 'ON'; | |
text-indent: -25px; | |
margin-left: 33px; | |
} |
Nice - remove the colon from:
border-bottom: 1px solid: #BABABA;
Thank you this was very useful to me.
+1 to mossy2100's comment you have an unwanted colon on line 43
how do you add a checkmark in the box
In your html checkbox, you can just add the 'checked' attribute. For example, https://cdpn.io/VEvGNE
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Good Work :) Tks