Comment puis-je personnaliser les styles de saisie de fichiers tout en conservant la compatibilité entre navigateurs ?

Fichier de type d'entrée de style : surmonter les défis de compatibilité du navigateur

La personnalisation de l'apparence des éléments d'entrée de type « fichier » peut être une tâche ardue en raison aux problèmes de compatibilité du navigateur. Cependant, en suivant quelques étapes simples, vous pouvez créer des styles personnalisés qui fonctionnent de manière transparente sur différents navigateurs.

1. Créez une balise d'entrée de fichier cachée :

Commencez par masquer l'élément d'entrée de fichier par défaut à l'aide de CSS :

<div>

2. Simulate Click Event Utilisation d'un bouton personnalisé :

Créez un bouton personnalisé et utilisez JavaScript pour simuler un événement de clic sur l'entrée de fichier masquée :

<div>

function getFile(){
  document.getElementById("upfile").click();
}

3. Personnaliser le style :

Vous pouvez désormais appliquer le style souhaité à l'élément de bouton personnalisé, tel que l'arrière-plan. couleur, bordure et formatage du texte.

#yourBtn {
  background-color: #DDD;
  border: 1px dashed #BBB;
  padding: 10px;
  cursor: pointer;
}

4. Téléchargement automatique de fichiers (facultatif) :

Si vous le souhaitez, vous pouvez implémenter un fichier automatique télécharger à l'aide de JavaScript :

function sub(obj){
  var file = obj.value;
  document.myForm.submit();
  event.preventDefault();
}

<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <!-- ... -->
  <input>

En suivant ces étapes, vous pouvez entièrement personnaliser l'apparence des éléments d'entrée du fichier sans vous soucier problèmes de compatibilité entre différents navigateurs.

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!