How to Change the File Upload Button Styling

Visualizza Markdown

Vuoi personalizzare lo stile del pulsante Caricamento file? Sia che tu stia usando lo stile Moderno o Classico per i tuoi caricamenti, viene sempre applicato uno stile predefinito.

Con la potenza del CSS, puoi personalizzare i tuoi campi di caricamento per renderli più specifici al branding della tua azienda e in questo tutorial ti mostreremo come fare! Immergiamoci subito!

Creazione del modulo

Innanzitutto, inizieremo creando un nuovo modulo e aggiungendo i nostri campi.

Se hai bisogno di aiuto nella creazione del tuo modulo, consulta questa utile documentazione.

Utilizzo dello stile moderno

Una volta aggiunto un campo modulo Caricamento file, dovrai decidere se utilizzare lo stile Moderno o Classico. In questo tutorial ti forniremo il CSS necessario per entrambi.

Tuttavia, per questa sezione, inizieremo a stilizzare lo stile Moderno per questo campo. Per impostarlo, seleziona Caricamento file sul tuo modulo e fai clic sulla scheda Avanzate. Dal menu a discesa Stile, assicurati di aver selezionato Moderno e salva il tuo modulo.

Aggiunta di CSS per lo stile moderno

Quando stilizzi per il caricamento file in stile Moderno, aggiungi questo CSS al tuo sito. Se hai bisogno di aiuto su come e dove aggiungere CSS personalizzato al tuo sito, consulta questo 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;
}

Ricorda di aggiornare il CSS sopra per lo sfondo. Questo URL dovrà puntare all'immagine che desideri utilizzare.

Aggiungendo questo CSS, il tuo Caricamento file per lo stile Moderno potrà ora apparire più specifico al branding della tua azienda.

Utilizzo dello stile classico

Proprio come abbiamo fatto con lo stile Moderno, possiamo regolare lo stile anche per lo stile Classico.

Per questa sezione, dovrai selezionare Classico dal menu a discesa Stile situato nella scheda Avanzate del campo.

nella scheda Avanzate del campo di caricamento file, seleziona Classico dal menu a discesa dello stile

Aggiunta di CSS per lo stile classico

Quando stilizzi per il caricamento file in stile Classico, aggiungi questo CSS al tuo sito. Per qualsiasi assistenza su come e dove aggiungere CSS personalizzato al tuo sito, consulta questo 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;
}

Si prega di notare che Firefox non supporta ::before e ::after sugli elementi di input. Utilizzando questo CSS in Firefox, nessun testo apparirebbe sul pulsante di caricamento per questo browser.

con questo CSS puoi cambiare facilmente la stilizzazione del pulsante Caricamento file del pulsante di caricamento Classico con l'eccezione del browser Firefox. Firefox non supporta gli pseudo-elementi before e after in CSS

E questo è tutto! Ora puoi facilmente aggiornare lo stile del pulsante Caricamento file. Desideri designare una directory specifica per i tuoi caricamenti di file? Dai un'occhiata al nostro tutorial su Come definire una directory specifica per i caricamenti di file.

Come modificare lo stile del pulsante di caricamento file

Riassunto AI