Home

Checkbox.css

Checkbox.css es un conjunto de estilos útiles para estilizar los checkbox de manera sencilla. Se tienen dos estructuras HTML una compatible sólo con google chrome y otra compatible con varios navegadores.

Estructura HTML compatible sólo con google chrome

HTML Descripción

<ul class="list-of-checkbox">
    <li class="list-of-checkbox__item">
        <label class="label">
            <input class="label__check label-check--A" type="checkbox" checked="true" name="check-A"/>
            <span class="label__text">label</span>
        </label>
    </li>
    <li class="list-of-checkbox__item">
        <label class="label">
            <input class="label__check label-check--A" type="checkbox" checked="true" name="check-A"/>
            <span class="label__text">label</span>
        </label>
    </li>
    <li class="list-of-checkbox__item">
        <label class="label">
            <input class="label__check label-check--A" type="checkbox" checked="true" name="check-A"/>
            <span class="label__text">label</span>
        </label>
    </li>
</ul>

Estructura HTML compatible con diferentes navegadores:

HTML Descripción

<ul class="list-of-checkbox">
    <li class="list-of-checkbox__item">
        <label class="label">
            <input class="check check-A" type="checkbox" checked="true" name="check-A" />
            <span class="check check-A__background"></span>
            <span class="check check-A__unchecked"></span>
            <soan class="label__text">label</soan>
        </label>
    </li>
    <li class="list-of-checkbox__item">
        <label class="label">
            <input class="check check-A" type="checkbox" checked="true" name="check-A" />
            <span class="check check-A__background"></span>
            <span class="check check-A__unchecked"></span>
            <soan class="label__text">label</soan>
        </label>
    </li>
    <li class="list-of-checkbox__item">
        <label class="label">
            <input class="check check-A" type="checkbox" checked="true" name="check-A" />
            <span class="check check-A__background"></span>
            <span class="check check-A__unchecked"></span>
            <soan class="label__text">label</soan>
        </label>
    </li>
</ul>