Custom Checkbox
X-Checkbox is a custom checkbox control, built on top of the exciting new technology called HTML5 Web Components and as simple as:
<acidjs-xcheckbox></acidjs-xcheckbox>
Demo
Register Mozilla's X-Tags
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<script src="AcidJs.XCheckbox/lib/x-tag-components.js"></script>
Register the Component on the Page via HTML5 @import
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<link rel="import" href="AcidJs.XCheckbox/classes/XCheckbox.html" />
HTML Attributes
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
JavaScript API: Methods, Getters and Setters
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
Usage and Code Insight
<form method="get" action="./">
<ul>
<li>
<acidjs-xcheckbox checkmark="tick" class="custom-css-class-1 custom-css-class-2" data-value="111" title="enabled, checked" id="chk-0" name="chk-0" disabled="false" label="enabled, checked" checked="true"></acidjs-xcheckbox>
</li>
<li>
<acidjs-xcheckbox checkmark="tick" title="disabled, checked" id="chk-1" name="chk-1" disabled="true" label="disabled, checked" checked="true"></acidjs-xcheckbox>
</li>
<li>
<acidjs-xcheckbox checkmark="tick" title="enabled, not checked" id="chk-2" name="chk-2" disabled="false" label="enabled, not checked" checked="false"></acidjs-xcheckbox>
</li>
<li>
<acidjs-xcheckbox checkmark="tick" title="disabled, not checked" id="chk-3" name="chk-3" disabled="true" label="disabled, not checked" checked="false"></acidjs-xcheckbox>
</li>
<li>
<acidjs-xcheckbox checkmark="tick"></acidjs-xcheckbox>
</li>
<li>
<acidjs-xcheckbox checkmark="square" title="enabled, checked" id="chk-4" name="chk-4" disabled="false" label="enabled, checked" checked="true"></acidjs-xcheckbox>
</li>
<li>
<acidjs-xcheckbox checkmark="square" title="disabled, checked" id="chk-5" name="chk-5" disabled="true" label="disabled, checked" checked="true"></acidjs-xcheckbox>
</li>
<li>
<acidjs-xcheckbox checkmark="square" title="enabled, not checked" id="chk-6" name="chk-6" disabled="false" label="enabled, not checked" checked="false"></acidjs-xcheckbox>
</li>
<li>
<acidjs-xcheckbox checkmark="square" title="disabled, not checked" id="chk-7" name="chk-7" disabled="true" label="disabled, not checked" checked="false"></acidjs-xcheckbox>
</li>
<li>
<acidjs-xcheckbox checkmark="square"></acidjs-xcheckbox>
</li>
</ul>
<!--<button>submit</button>-->
</form>
/*
* Custom Checkbox Web Component by Martin Ivanov
* More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
* @author Martin Ivanov
* @url developer website: http://wemakesites.net/
* @url developer twitter: https://twitter.com/#!/wemakesitesnet
* @url developer blog http://acidmartin.wordpress.com/
**/
/*
* Do you like this solution? Please, donate:
* https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
**/
acidjs-xcheckbox,
acidjs-xcheckbox *,
acidjs-xcheckbox ::before,
acidjs-xcheckbox input:checked + span
{
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
border: 0;
color: #000;
background: none transparent;
outline: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
acidjs-xcheckbox span,
acidjs-xcheckbox[disabled="true"],
acidjs-xcheckbox[disabled="true"] *
{
color: #666;
}
acidjs-xcheckbox[disabled="true"],
acidjs-xcheckbox[disabled="true"] *
{
opacity: .75;
cursor: no-drop;
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none;
}
acidjs-xcheckbox span,
acidjs-xcheckbox ::before
{
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
acidjs-xcheckbox
{
font: normal normal 1em/2em Arial, Helvetica, Sans-serif;
}
acidjs-xcheckbox label
{
cursor: pointer;
}
acidjs-xcheckbox [hidden]
{
position: absolute;
z-index: -1;
left: -9999px;
opacity: 0;
}
acidjs-xcheckbox span::before
{
content: "";
border: solid 3px #1375b3;
margin: .2em;
width: 24px;
height: 24px;
text-align: center;
color: #fff;
font-size: 22px;
line-height: 24px;
text-shadow: 0 0 2px rgba(0, 0, 0, .25);
}
acidjs-xcheckbox input:checked + span::before
{
background: #e74c3c;
}
acidjs-xcheckbox input:checked + span::before
{
content: "\2714";
box-shadow: 0 0 4px rgba(0, 0, 0, .5);
}
acidjs-xcheckbox[disabled="true"]
{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
acidjs-xcheckbox[checkmark="square"] input + span::before
{
font-size: 30px;
line-height: 18px;
}
acidjs-xcheckbox[checkmark="square"] input:checked + span::before
{
content: "\25a0";
}