HTML Checkbox CSS Animation

Question

Wie kann ich eine HTML Checkbox ohne Javascript animieren? Beim Klicken soll sich die Farbe ändern und die Box drehen.

Answer 1

Du kannst dazu die CSS Pseudo-Klassen ":checked" und "::after" benutzen. Demo

<style>
    .checkbox-container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 15px;
        cursor: pointer;
        font-size: 22px;
        user-select: none;
    }

    .checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
        transition: transform 0.2s, background-color 0.2s; /* Übergangseffekte für Rotation und Farbänderung */
    }

    .checkbox-container:hover .checkmark {
        background-color: #ccc;
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .checkbox-container input:checked ~ .checkmark:after {
        display: block;
    }

    .checkbox-container .checkmark:after {
        left: 10px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid #000;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }

    .checkbox-container input:checked ~ .checkmark {
        transform: rotate(360deg);
        background-color: #4caf50;
    }
</style>

<label class="checkbox-container">
    <input type="checkbox">
    <span class="checkmark"></span>
    Checkbox
</label>