Skip to content

Instantly share code, notes, and snippets.

@Loupax

Loupax/Style Checkbox with CSS using Label.html

Last active April 30, 2018 13:42
Show Gist options
  • Save Loupax/f57b3f7fe48f3514903939ab7356bb67 to your computer and use it in GitHub Desktop.
Save Loupax/f57b3f7fe48f3514903939ab7356bb67 to your computer and use it in GitHub Desktop.
Download ZIP
Use a hidden checkbox, label and styles to style the checkbox. A fork (and minor clean up) of https://gist.github.com/592332
Raw
Style Checkbox with CSS using Label.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Checkbox</title>
<style>
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
background: url('http://dl.dropbox.com/u/11180/icons/unchecked.png') no-repeat;
height: 30px;
width: 30px;
display: block;
padding: 0;
}
input[type=checkbox]:checked + label {
background: url('http://dl.dropbox.com/u/11180/icons/checked.png') no-repeat;
height:30px;
width: 30px;
display: block;
padding: 0;
}
</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