Wie erstelle ich bildbasierte Kontrollkästchen mit reinem semantischem HTML und CSS?

Bildbasierte Kontrollkästchen mit reinem semantischem HTML/CSS erstellen

Anstatt sich auf vorgefertigte Lösungen zu verlassen, können Sie diese Funktion mit implementieren rein semantisches HTML und CSS, das Ihr Verständnis für CSS-Operationen fördert.

Schritt 1: Semantisches HTML

Definieren Sie eindeutige ID-Attribute für Ihre Kontrollkästchen und schließen Sie sie in ein. Elemente mit for-Attributen, die der Kontrollkästchen-ID entsprechen. Dadurch wird eine direkte Verknüpfung zwischen der Beschriftung und dem Kontrollkästchen hergestellt, sodass durch Klicken auf die Beschriftung eine Umschaltaktion für das Kontrollkästchen ausgelöst wird.

Beispiel:

<input type="checkbox">

Schritt 2: Ausblenden des Kontrollkästchens

Wenden Sie CSS an, um das Kontrollkästchen auszublenden, z. B. display: none;.

Schritt 3: Gestalten des visuellen Kontrollkästchens

Verwenden Sie das Pseudoelement ::before von CSS, um eine visuelle Darstellung des Kontrollkästchens zu erstellen:

label::before {
    background-image: url(unchecked.png);
}

Schritt 4: Geprüften Status implementieren

Ändern Sie die Stile, wenn das Kontrollkästchen aktiviert ist, mithilfe des CSS-Pseudoselektors :checked:

:checked + label::before {
    background-image: url(checked.png);
}

Denken Sie daran, dass der benachbarte Geschwisterselektor sicherstellt, dass Stiländerungen nur für Beschriftungen gelten, die unmittelbar auf das ausgeblendete Kontrollkästchen folgen.

Schritt 5: Position, Abmessungen und Übergänge

Positionieren Sie das Etikett richtig, weisen Sie entsprechende Abmessungen zu und wenden Sie sanfte Übergänge an Verbessern Sie das Benutzererlebnis.

Beispiel (JavaScript-Snippet):

ul {
    list-style-type: none;
}

li {
    display: inline-block;
}

input[type="checkbox"][id^="cb"] {
    display: none;
}

label {
    border: 1px solid #fff;
    padding: 10px;
    display: block;
    position: relative;
    margin: 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label::before {
    background-color: white;
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    border: 1px solid grey;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
}

label img {
    height: 100px;
    width: 100px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
}

:checked+label {
    border-color: #ddd;
}

:checked+label::before {
    content: "✓";
    background-color: grey;
    transform: scale(1);
}

:checked+label img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: -1;
}

Das obige ist der detaillierte Inhalt vonWie erstelle ich bildbasierte Kontrollkästchen mit reinem semantischem HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!