mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-23 18:56:29 +02:00
Code Issues Releases Wiki Activity
Files
f7af6da9e4f7efbf0a15c0d79ce4da4fef32acb6
csslayout/contents/custom-checkbox-button.md
Phuoc Nguyen 423f512caa feat: Indeterminate progress bar
2022-10-02 17:36:49 +07:00

1.4 KiB
Raw Blame History

layout, title, description, keywords
layout title description keywords
layouts/post.njk Custom checkbox button Create a custom checkbox button with CSS flexbox css checkbox, css flexbox

HTML

<label class="custom-checkbox-button">
    <!-- The real checkbox -->
    <input type="checkbox" class="custom-checkbox-button__input" />

    <!-- The fake square -->
    <div class="custom-checkbox-button__square">
        <!-- The inner square -->
        <div class="custom-checkbox-button__checkbox custom-checkbox-button__checkbox--selected"></div>
    </div>

    <!-- The text -->
    ...
</label>

CSS

.custom-checkbox-button {
    /* Center the content horizontally */
    align-items: center;
    display: inline-flex;

    /* Cursor */
    cursor: pointer;
}

.custom-checkbox-button__input {
    /* Hide it */
    display: none;
}

.custom-checkbox-button__square {
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;

    /* Spacing */
    margin-right: 0.5rem;
    padding: 0.25rem;
}

.custom-checkbox-button__checkbox {
    background-color: transparent;
    border-radius: 0.25rem;
    height: 1rem;
    width: 1rem;
}

.custom-checkbox-button__checkbox--selected {
    /* For selected checkbox */
    background-color: #3b82f6;
}

{% demo %}{% include "covers/custom-checkbox-button.njk" %}{% enddemo %}

See also