So entfernen Sie den Leerraum um Bildauswahlen

Möchten Sie den zusätzlichen Platz um Ihre Bilder beseitigen, wenn Sie Bildauswahlen für Ihre Formularfelder vom Typ Kontrollkästchen oder Mehrfachauswahl verwenden? Mit nur wenigen Zeilen CSS können Sie dies mühelos erreichen, und wir helfen Ihnen dabei!

Erstellung des Formulars

Erstellen Sie zunächst Ihr Formular in WPForms. Sobald Sie Ihr Formular erstellt haben, fügen Sie die benötigten Felder hinzu, einschließlich des Feldes Mehrfachauswahl, das als Grundlage für unsere Bildauswahlen-Einrichtung dient.

Wenn Sie unsicher sind, wie Sie Bildauswahlen einrichten, können Sie unsere Dokumentation zum Hinzufügen von Bildauswahlen zu WPForms konsultieren. Klicken Sie einfach hier für detaillierte Anweisungen.

Entfernen des Leerraums

Wenn Sie unsicher sind, wie oder wo Sie CSS zu Ihrer Website hinzufügen können, können Sie dieses Tutorial zurate ziehen.

Für alle Formulare

Standardmäßig erscheint beim Hinzufügen von Bildauswahlen zu Ihrem Formular ein Leerraum um das Bild aufgrund von CSS-Padding. Dieser Leerraum ist im folgenden Bild zu sehen:

Um diesen Leerraum zu entfernen, müssen Sie den folgenden CSS-Code kopieren und auf Ihrer Website einfügen:

span.wpforms-image-choices-label {
    display: none !important;
}

.wpforms-field-label-inline {
    line-height: 0 !important;
}

label.wpforms-field-label-inline {
    padding: 0 !important;
}

Dieser CSS-Code entfernt nicht nur den Leerraum um die Bilder, sondern blendet auch die zugehörigen Beschriftungen aus, sodass die Bilder für sich allein stehen.

Für ein bestimmtes Formular

Um diesen Leerraum für die Formular-ID 1328 zu entfernen, müssen Sie den folgenden CSS-Code kopieren und auf Ihrer Website einfügen:

form#wpforms-form-1328 span.wpforms-image-choices-label {
    display: none !important;
}
 
form#wpforms-form-1328 .wpforms-field-label-inline {
    line-height: 0 !important;
}
 
form#wpforms-form-1328 label.wpforms-field-label-inline {
    padding: 0 !important;
}

Und das war's! Sie haben den Leerraum um die Bilder in Ihrem Formular erfolgreich entfernt. Warum nicht weitere Artikel zum Styling von Bildauswahlen lesen? Werfen Sie einen Blick auf unseren Artikel über Anpassen der Beschriftungen für Bildauswahlen.