Bilder zu Kontrollkästchen-Labels mit CSS hinzufügen

Möchten Sie Ihren Formular-Labels für Kontrollkästchen Bilder hinzufügen? Sie können die visuelle Attraktivität Ihres Formulars verbessern, indem Sie entweder Hintergrundbilder oder schriftbasierte Symbole zu Ihren Kontrollkästchen-Labels mit CSS hinzufügen. Standardmäßig zeigen alle Formular-Labels nur den Text an, den Sie im Formular-Builder eingegeben haben.

Diese Anleitung zeigt Ihnen zwei verschiedene Methoden, um dies zu erreichen.

Wenn Sie den Anweisungen im Artikel folgen, ist es einfach genug, Bilder und Text für die Labels Ihres Kontrollkästchen-Formularfelds mithilfe eines Bildes oder sogar schriftbasierter Symbole zu verwenden.

Einrichtung des Formulars

Erstellen Sie zuerst Ihr Formular und fügen Sie ein Kontrollkästchen-Formularfeld hinzu. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie unsere Anleitung zum Erstellen Ihres ersten Formulars.

Notieren Sie sich Ihre Formular-ID und Feld-ID, da Sie diese beim Hinzufügen von CSS benötigen. Wenn Sie nicht sicher sind, wie Sie diese IDs finden, lesen Sie bitte unsere Anleitung zum Auffinden von Formular- und Feld-IDs.

Hintergrundbilder hinzufügen

Die erste Methode verwendet Hintergrundbilder, die in Ihre WordPress-Mediathek hochgeladen wurden. Wenn Sie nicht sicher sind, wie Sie benutzerdefiniertes CSS zu Ihrer Website hinzufügen, lesen Sie bitte unser Tutorial zum Hinzufügen von CSS zu Ihrer Website.

Wenn Sie dem Label des Kontrollkästchen-Formularfelds ein Hintergrundbild hinzufügen möchten, verwenden Sie das folgende CSS.

Ersetzen Sie die folgenden Werte im CSS-Code:

• Zeile 1: Ersetzen Sie 1000 durch Ihre Formular-ID
• Zeile 1: Ersetzen Sie field_25 durch Ihre Feld-ID
• Zeile 4: Ersetzen Sie die URL durch Ihren Bildpfad
• Zeilen 6-7: Passen Sie Höhe und Breite in den Zeilen 6-7 an Ihre Bildgröße an

Kopieren Sie für jede zusätzliche Kontrollkästchen-Option den gesamten CSS-Block und ändern Sie choice-1 in choice-2, choice-3 usw. Sie können auch verschiedene Bilder für jede Auswahl verwenden, indem Sie die background-image-URL ändern.

Schriftbasierte Symbole verwenden

Die zweite Methode verwendet Schrift-Symbole, die leichter und flexibler als Hintergrundbilder sein können. Stellen Sie zunächst sicher, dass Sie eine Schrift-Symbolbibliothek in Ihrem WordPress-Theme installiert haben. Wenn Sie dabei Hilfe benötigen, lesen Sie die Anleitung von WPBeginner zum Hinzufügen von Symbolschriften zu WordPress.

Sie können auch Bilder für Kontrollkästchen-Labels verwenden, indem Sie eine schriftbasierte Symbolschriftart verwenden.

Genau wie beim vorherigen CSS zielen wir auf die Formular-ID 1000 und die Feld-ID 25 ab. Im folgenden CSS sehen Sie -1000-, was sich auf die Formular-ID bezieht.

ul#wpforms-583-field_3 li.choice-1 label:before,
ul#wpforms-583-field_3 li.choice-2 label:before,
ul#wpforms-583-field_3 li.choice-3 label:before,
ul#wpforms-583-field_3 li.choice-4 label:before,
ul#wpforms-583-field_3 li.choice-5 label:before {
    font-family: dashicons;
    content: "\f173";
    display: inline-block;
    color: #000000;
    font-size: 16px;
    margin: 0px 5px;
    position: relative;
    top: 2px;
}

Häufig gestellte Fragen

F: Kann ich dieses CSS für das Multiple-Choice-Formularfeld verwenden?

A: Absolut! Dieselben CSS-Klassen werden auch für das Multiple-Choice-Formularfeld verwendet. Denken Sie daran, die Formular- und Feld-IDs in Ihrem CSS zu aktualisieren.

F: Warum scheint dies für mein Formular nicht zu funktionieren?

A: Bitte stellen Sie sicher, dass Sie das CSS aktualisiert haben, um Ihre eigenen Formular- und Feld-IDs zu verwenden. Sobald Sie dies bestätigt haben und Ihr Bild nicht angezeigt wird, überprüfen Sie bitte die URL für das Bild, das Sie in Ihrem CSS hinzuzufügen versuchen.

Hilfe beim Auffinden Ihrer Formular- und Feld-IDs finden Sie in dieser hilfreichen Dokumentation.

F: Kann ich dies für das Dropdown-Feld verwenden?

A: Derzeit funktioniert dieses CSS nur korrekt mit den folgenden Feldern:

• Kontrollkästchen
• Mehrfachauswahl
• Zahlungs-Checkbox
• Zahlungs-Multiple-Choice

Dies liegt hauptsächlich daran, wie moderne Browser Dropdown-Felder und das HTML-Markup rendern.

Und das ist alles! Sie haben erfolgreich ein Bild zu Ihren Checkbox-Labels hinzugefügt. Möchten Sie auch das Aussehen der Bewertungs-Icons anpassen? Schauen Sie sich unser Tutorial an, wie Sie das Aussehen der Bewertungs-Icons anpassen.