KI-Zusammenfassung
Möchten Sie das Styling des Datei-Upload-Buttons ändern? Egal, ob Sie den Modernen oder den Klassischen Stil für Ihre Uploads verwenden, es wird immer ein Standard-Styling angewendet.
Mit der Macht von CSS können Sie Ihre Upload-Felder personalisieren, um sie besser an das Branding Ihres Unternehmens anzupassen. In diesem Tutorial zeigen wir Ihnen, wie das geht! Tauchen wir ein!
Erstellen des Formulars
Zuerst erstellen wir ein neues Formular und fügen unsere Felder hinzu.
Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte diese nützliche Dokumentation.
Verwendung des modernen Stils
Wenn Sie ein Datei-Upload-Formularfeld hinzugefügt haben, müssen Sie entscheiden, ob Sie den modernen oder den klassischen Stil verwenden möchten. In diesem Tutorial geben wir Ihnen das benötigte CSS für beide.
Für diesen Abschnitt beginnen wir jedoch mit dem Styling des modernen Stils für dieses Feld. Um dies einzustellen, wählen Sie das Datei-Upload-Feld in Ihrem Formular aus und klicken Sie auf die Registerkarte Erweitert. Stellen Sie im Dropdown-Menü Stil sicher, dass Sie Modern ausgewählt haben, und speichern Sie Ihr Formular.
Hinzufügen von CSS für den modernen Stil
Beim Styling für den Datei-Upload im modernen Stil fügen Sie dieses CSS zu Ihrer Website hinzu. Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefiniertes CSS zu Ihrer Website hinzufügen können, lesen Sie bitte dieses Tutorial.
.dz-message svg {
display: none;
}
.modern-title::before {
content: '';
/*Change the URL below to point to the image you would like to display*/
background: url(https://myexample-site.com/img/my-new-file-upload-image.svg);
width: 100px;
height: 35px;
background-repeat: no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
}
.wpforms-uploader.dz-clickable {
min-height: 100px;
}
Durch das Hinzufügen dieses CSS kann Ihr Datei-Upload im modernen Stil nun besser an das Branding Ihres Unternehmens angepasst werden.
Verwendung des klassischen Stils
Genau wie beim modernen Stil können wir auch das Styling für den klassischen Stil anpassen.
Für diesen Abschnitt müssen Sie Klassisch aus dem Dropdown-Menü Stil auswählen, das sich auf der Registerkarte Erweitert des Feldes befindet.
Hinzufügen von CSS für den klassischen Stil
Beim Styling für den Datei-Upload im klassischen Stil fügen Sie dieses CSS zu Ihrer Website hinzu. Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefiniertes CSS zu Ihrer Website hinzufügen können, lesen Sie bitte dieses Tutorial.
input[type="file"] {
outline: none !important;
padding: 4px !important;
margin: -4px !important;
}
input[type="file"]:focus-within::file-selector-button,
input[type="file"]:focus::file-selector-button {
outline: 2px solid #0964b0 !important;
outline-offset: 2px !important;
}
input[type="file"]::before {
top: 16px !important;
}
input[type="file"]::after {
top: 14px !important;
}
input[type="file"] {
position: relative !important;
}
input[type="file"]::file-selector-button {
width: 136px !important;
color: transparent !important;
}
input[type="file"]::before {
position: absolute !important;
pointer-events: none !important;
left: 40px !important;
color: #0964b0 !important;
content: "Upload File" !important;
}
input[type="file"]::after {
position: absolute !important;
pointer-events: none !important;
left: 16px !important;
height: 20px !important;
width: 20px !important;
content: "" !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E") !important;
}
input[type="file"]::file-selector-button {
border-radius: 4px !important;
padding: 0 16px !important;
height: 40px !important;
cursor: pointer !important;
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.16) !important;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05) !important;
margin-right: 16px !important;
transition: background-color 200ms !important;
}
/* hover state */
input[type="file"]::file-selector-button:hover {
background-color: #f3f4f6 !important;
}
/* active state */
input[type="file"]::file-selector-button:active {
background-color: #e5e7eb !important;
}
Bitte beachten Sie, dass Firefox ::before und ::after bei Eingabeelementen nicht unterstützt. Wenn Sie dieses CSS in Firefox verwenden, wird für diesen Browser kein Text auf dem Upload-Button angezeigt.
Und das ist alles! Sie können das Styling des Datei-Upload-Buttons jetzt einfach aktualisieren. Möchten Sie ein bestimmtes Verzeichnis für Ihre Datei-Uploads festlegen? Schauen Sie sich unser Tutorial So legen Sie ein bestimmtes Verzeichnis für Datei-Uploads fest an.