Comment puis-je styliser les éléments d'entrée de fichier avec CSS3 et JavaScript ?

Styliser les éléments du fichier d'entrée avec CSS3 et JavaScript

Styliser les éléments d'entrée HTML natifs, tels que l'entrée du fichier, peut être un défi. Cependant, il est possible d'améliorer leur apparence et de créer une expérience de sélection de fichiers personnalisée à l'aide de CSS3 et de JavaScript.

Option CSS3 pour styliser la saisie des fichiers

CSS3 ne fournit pas de prise en charge du style des éléments d'entrée de fichier. Cependant, il est possible d'utiliser le pseudo-élément ::-webkit-file-upload-button dans les navigateurs prenant en charge le moteur de rendu WebKit (par exemple, Chrome, Safari).

::-webkit-file-upload-button {
  background-color: #00f;
  color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px 10px;
}

JavaScript Option de sélection de fichier

Une approche alternative consiste à créer un élément div personnalisé qui déclenche l'entrée du fichier lorsque cliqué.

<div>

document.getElementById('file-button').addEventListener('click', () => {
  document.getElementById('file-input').click();
});

document.getElementById('file-input').addEventListener('change', () => {
  const filename = document.getElementById('file-input').value.split('\').pop();
  document.getElementById('file-button').textContent = filename;
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!