How to Change the File Upload Button Styling

Afficher Markdown

Souhaitez-vous styliser le bouton Téléchargement de fichier ? Que vous utilisiez le style Moderne ou Classique pour vos téléchargements, un style par défaut est toujours appliqué.

Grâce à la puissance de CSS, vous pouvez personnaliser vos champs de téléchargement pour qu'ils correspondent davantage à l'image de votre entreprise, et ce tutoriel vous montrera comment ! Plongeons dans le vif du sujet !

Création du formulaire

Tout d'abord, nous allons créer un nouveau formulaire et ajouter nos champs.

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation utile.

Utilisation du style moderne

Une fois que vous avez ajouté un champ de formulaire Téléchargement de fichier, vous devrez décider si vous souhaitez utiliser le style Moderne ou Classique. Dans ce tutoriel, nous vous fournirons le CSS nécessaire pour les deux.

Cependant, pour cette section, nous allons commencer par styliser le style Moderne pour ce champ. Pour ce faire, sélectionnez Téléchargement de fichier sur votre formulaire et cliquez sur l'onglet Avancé. Dans le menu déroulant Style, assurez-vous d'avoir sélectionné Moderne et enregistrez votre formulaire.

Ajout de CSS pour le style moderne

Lors de la stylisation pour le téléchargement de fichiers de style Moderne, ajoutez ce CSS à votre site. Si vous avez besoin d'aide sur comment et où ajouter du CSS personnalisé à votre site, veuillez consulter ce tutoriel.

.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;
}

N'oubliez pas de mettre à jour le CSS ci-dessus pour l'arrière-plan. Cette URL devra pointer vers l'image que vous souhaitez utiliser.

En ajoutant ce CSS, votre Téléchargement de fichier pour le style Moderne peut désormais apparaître plus spécifiquement à l'image de votre entreprise.

Utilisation du style classique

Tout comme nous l'avons fait avec le style Moderne, nous pouvons également ajuster le style pour le style Classique.

Pour cette section, vous devrez sélectionner Classique dans le menu déroulant Style situé dans l'onglet Avancé du champ.

dans l’onglet Avancé du champ de téléversement de fichier, sélectionnez Classique dans le menu déroulant Style

Ajout de CSS pour le style classique

Lors de la stylisation pour le téléchargement de fichiers de style Classique, ajoutez ce CSS à votre site. Pour toute aide sur comment et où ajouter du CSS personnalisé à votre site, veuillez consulter ce tutoriel.

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;
}

Veuillez noter que Firefox ne prend pas en charge ::before et ::after sur les éléments d'entrée. Lors de l'utilisation de ce CSS dans Firefox, aucun texte n'apparaîtrait sur le bouton de téléchargement pour ce navigateur.

avec ce CSS, vous pouvez facilement modifier le style du bouton de téléversement de fichier du bouton de téléversement Classique à l’exception du navigateur Firefox. Firefox ne prend pas en charge les pseudo-éléments before et after en CSS

Et voilà ! Vous pouvez maintenant facilement mettre à jour le style du bouton Téléchargement de fichier. Souhaitez-vous désigner un répertoire spécifique pour vos téléchargements de fichiers ? Consultez notre tutoriel sur Comment définir un répertoire spécifique pour les téléchargements de fichiers.

Comment modifier le style du bouton de téléchargement de fichier

Résumé IA