HTML5, CSS3 & JS Experiments

By Martin Ivanov

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";
}