Skip to content

Instantly share code, notes, and snippets.

@danprince

danprince/jsbin.lodahemi.html

Created July 4, 2014 16:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danprince/dc0036909774ef8603d5 to your computer and use it in GitHub Desktop.
Save danprince/dc0036909774ef8603d5 to your computer and use it in GitHub Desktop.
Download ZIP
Checkbox to Yes/No in Pure CSS
Raw
jsbin.lodahemi.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type='checkbox'/>
</body>
</html>
Raw
jsbin.lodahemi.less
.pill() {
border-radius:4px;
padding:4px 12px;
font-size:1.3em;
whitespace:nowrap;
min-width:32px;
text-align:center;
cursor:pointer;
}
input[type='checkbox'] {
height:0;
display:inline-block;
cursor:pointer;
&:after {
content: 'Yes';
background:#ddd;
color:#888;
.pill()
}
&:before {
background:#4fd1e7;
color:white;
content: 'No';
margin-right:4px;
.pill()
}
&:checked {
&:after {
background:#4fd1e7;
color:white;
}
&:before {
background:#ddd;
color:#888;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment