Skip to content

Instantly share code, notes, and snippets.

@boazsender
Created August 30, 2012 04:34
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save boazsender/3522354 to your computer and use it in GitHub Desktop.
Save boazsender/3522354 to your computer and use it in GitHub Desktop.
Mobile CSS checkboxes
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;
}
@gaetansenn
Copy link

Good Work :) Tks

@mossy2100
Copy link

Nice - remove the colon from:
border-bottom: 1px solid: #BABABA;

@dscott0
Copy link

dscott0 commented Apr 4, 2017

Thank you this was very useful to me.

+1 to mossy2100's comment you have an unwanted colon on line 43

@mjade87
Copy link

mjade87 commented Sep 11, 2018

how do you add a checkmark in the box

@chiester
Copy link

chiester commented Oct 2, 2018

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