checkbox using HTML CSS

<div class="myuihub-checkbox">
    <input type="checkbox" id="myuihub-input">
    <label for="myuihub-input"></label>
</div>

.myuihub-checkbox input {
    display: none;
}

.myuihub-checkbox label {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border-radius: 4px;
    border: 2px solid #2e2f2f;
    margin: 0;
    background-image: url("data:image/svg+xml,<svg width='512' height='369' viewBox='0 0 512 369' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M500.103 11.8931C484.262 -3.96937 458.538 -3.95937 442.675 11.8931L184.211 270.368L69.3345 155.492C53.4721 139.63 27.7593 139.63 11.8968 155.492C-3.96562 171.355 -3.96562 197.068 11.8968 212.93L155.486 356.519C163.412 364.445 173.806 368.419 184.2 368.419C194.594 368.419 204.998 364.455 212.924 356.519L500.103 69.3298C515.966 53.4783 515.966 27.7546 500.103 11.8931Z' fill='white'/></svg>");
    background-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: all 300ms ease-in-out;
}

.myuihub-checkbox input:checked~label {
    background-size: 55%;
    background-color: #2e2f2f;
}

No results found