Comment puis-je personnaliser l'apparence des entrées de fichiers avec CSS3 et JavaScript ?

Styliser les fichiers d'entrée avec CSS3 et JavaScript

Bien qu'il soit possible de styliser l'élément "fichier d'entrée" par défaut à l'aide de CSS3, les options de personnalisation sont limité. Pour personnaliser entièrement l'apparence de l'entrée du fichier ou déclencher la fenêtre de navigation avec un élément alternatif, voici comment y parvenir en utilisant HTML, CSS3 et JavaScript :

Personnalisation avec jQuery

1. HTML : Insérez à la fois l'entrée de fichier par défaut et un élément div qui servira d'élément personnalisé bouton.

<div>

2. CSS : Masquer l'entrée de fichier par défaut.

#file {
    display: none;
}

3. jQuery : Enveloppez l'entrée du fichier dans un div avec des dimensions masquées pour éviter les clics accidentels. Utilisez l'événement change pour mettre à jour le texte du bouton personnalisé avec le chemin du fichier sélectionné. Déclenchez l'événement de clic d'entrée de fichier lorsque vous cliquez sur le bouton personnalisé.

var wrapper = $('<div/>').css({height: 0, width: 0, 'overflow': 'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function() {
    $(this).closest('#file').text($(this).val());
});

$('#file').click(function() {
    fileInput.click();
}).show();

Résultat :

Un élément d'entrée de fichier personnalisé qui peut être personnalisé via CSS et déclenche la fenêtre de navigation dans les fichiers lorsque vous cliquez dessus.

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!