Skip to content

Instantly share code, notes, and snippets.

@kirkas
Last active August 29, 2015 14:06
Show Gist options
  • Save kirkas/3722b2cad101a44eff15 to your computer and use it in GitHub Desktop.
Save kirkas/3722b2cad101a44eff15 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<p>
<input type="checkbox" id="test1">
<label for="test1">normal</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked">
<label for="test2">checked</label>
</p>
<p>
<input type="checkbox" id="test3" disabled="disabled">
<label for="test3">disabled normal</label>
</p>
<p>
<input type="checkbox" id="test4" checked="checked" disabled="disabled">
<label for="test4">disabled checked</label>
</p>
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
$input-sprite: "http://apps.wittysparks.com/css3_radio_checkbox/wittysparks_checkbox_radio.png";
$sprint-item-width: 16px;
$sprint-item-height: 14px;
$sprint-item-space: 1px;
$sprint-item-axis: y;
[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
pointer: cursor;
height: $sprint-item-height;
width: $sprint-item-width;
display: inline-block;
vertical-align: middle;
background-image: url(data:image/png;base64,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);
background-size: $sprint-item-width;
background-position: top center;
outline: 0;
&:hover {
background-position-#{$sprint-item-axis}: $sprint-item-height + $sprint-item-space;
}
&:checked {
background-position-#{$sprint-item-axis}: 2 * ($sprint-item-height + $sprint-item-space);
}
&:disabled {
background-position-#{$sprint-item-axis}: 3 * ($sprint-item-height + $sprint-item-space);
}
&:disabled:checked {
background-position-#{$sprint-item-axis}: 4 * ($sprint-item-height + $sprint-item-space);
}
}
[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
pointer: cursor;
height: 14px;
width: 16px;
display: inline-block;
vertical-align: middle;
background-image: url(data:image/png;base64,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);
background-size: 16px;
background-position: top center;
outline: 0;
}
[type="checkbox"]:hover {
background-position-y: 15px;
}
[type="checkbox"]:checked {
background-position-y: 30px;
}
[type="checkbox"]:disabled {
background-position-y: 45px;
}
[type="checkbox"]:disabled:checked {
background-position-y: 60px;
}
<p>
<input type="checkbox" id="test1">
<label for="test1">normal</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked">
<label for="test2">checked</label>
</p>
<p>
<input type="checkbox" id="test3" disabled="disabled">
<label for="test3">disabled normal</label>
</p>
<p>
<input type="checkbox" id="test4" checked="checked" disabled="disabled">
<label for="test4">disabled checked</label>
</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment