Skip to content

Instantly share code, notes, and snippets.

@Warin

Warin/base.css

Last active December 25, 2015 11:59
Show Gist options
  • Save Warin/6973061 to your computer and use it in GitHub Desktop.
Save Warin/6973061 to your computer and use it in GitHub Desktop.
Download ZIP
CSS: Custom Checkboxes on Webkit Demo: http://jsfiddle.net/FBjqm/
Raw
base.css
/**!
* Custom Checkbox for Webkit
* @author @Warin
*/
body {font-family:Arial,Verdana,sans-serif;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*targets only webkit browsers*/
.fs+.fs {padding-top:5px;}
.fs>.field {position: relative;}
.fs_chk {-webkit-appearance:none;border:0;margin:0;display:block;float:left;}
.fs_chk+label {vertical-align: middle;margin-left: 2.6em;display:block;}
.fs_chk::before {content:"\00A0";border:1px solid #ccc;border-radius:5px;width: 1.8em; height: 1.8em;display:block;}
.fs_chk:checked::after {content:"\2714";font-size: 1.8em;color:#090;position: absolute;left:0;top:0;}
.fs_chk:disabled:checked::after {color:#ccc;}
}
Raw
markup.html
<!doctype html>
<html>
<body>
<div class="fs">
<div class="field">
<input checked="checked" disabled="disabled" class="fs_chk" id="chk_0" name="chk_0" type="checkbox" value="i" /><label for="chk_0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis a mauris eu vehicula. Pellentesque faucibus, orci in fermentum mollis, neque turpis venenatis nunc, id posuere mi mauris ut urna.</label>
</div><!-- .field -->
</div>
<div class="fs">
<div class="field">
<input class="fs_chk" id="chk_1" name="chk_1" type="checkbox" value="i" /><label for="chk_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis a mauris eu vehicula. Pellentesque faucibus, orci in fermentum mollis, neque turpis venenatis nunc, id posuere mi mauris ut urna.</label>
</div><!-- .field -->
</div>
<div class="fs">
<div class="field">
<input class="fs_chk" id="chk_2" name="chk_2" type="checkbox" value="i" /><label for="chk_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis a mauris eu vehicula. Pellentesque faucibus, orci in fermentum mollis, neque turpis venenatis nunc, id posuere mi mauris ut urna.</label>
</div><!-- .field -->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment