Skip to content

Instantly share code, notes, and snippets.

@gin1314

gin1314/gist:74f7513eabd91eb16868

Created July 10, 2015 09:45
Show Gist options
  • Save gin1314/74f7513eabd91eb16868 to your computer and use it in GitHub Desktop.
Save gin1314/74f7513eabd91eb16868 to your computer and use it in GitHub Desktop.
Download ZIP
css: custom checkbox using :checked pseudo class
Raw
gistfile1.html
<div class="checkbox">
<label for="checkbox-1">
<input type="checkbox" name="box[1]" id="checkbox-1" checked>
Checkbox
<div class="checkbox-ui"></div>
</label>
</div>
<div class="checkbox">
<label for="checkbox-2">
<input type="checkbox" name="box[2]" id="checkbox-2">
Checkbox 2
<div class="checkbox-ui"></div>
</label>
</div>
<style>
input[type="checkbox"] {
opacity: 0;
z-index: -1;
position: absolute;
}
label {
position: relative;
}
.checkbox input[type="checkbox"]:checked + .checkbox-ui {
border: 1px solid #454545;
background-color: #454545;
}
.checkbox-ui {
position: absolute;
width: 16px;
height: 16px;
border: 1px solid #337ab7;
cursor: pointer;
top: 2px;
left: 0;
border-radius: 2px;
}
.checkbox-ui-enabled {
border: 1px solid #454545;
background-color: #454545;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment