Skip to content

Instantly share code, notes, and snippets.

@cybear

cybear/styled-checkbox.html

Created January 18, 2011 10:07
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cybear/784249 to your computer and use it in GitHub Desktop.
Save cybear/784249 to your computer and use it in GitHub Desktop.
Download ZIP
a styled checkbox that can be used as a flipswitch
Raw
styled-checkbox.html
<!DOCTYPE html>
<html>
<head>
<title>Checkbox</title>
<style>
input[type=checkbox]{display:none;}
input[type=checkbox] + label{
background: #999;
height: 32px;
width: 32px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox] + label:before{content:'Nee';}
input[type=checkbox]:checked + label{
background: #ccc;
height: 32px;
width: 32px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label:before{content:'Ja';}
</style>
</head>
<body>
<p>
<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment