AccueilActualitésDéveloppementTuto: Personnaliser un champ d’envoi d’images Développement Tuto: Personnaliser un champ d’envoi d’images Publié le 07/08/2014 Partager cet article : Partager sur Facebook Partager sur Twitter Partager sur Linkedin Share on pinterest Les champs d'envoi de fichiers input[type='file'] font partie de ces oubliés du CSS, tristement non personnalisables. Est-ce une raison pour garder des champs d'envoi tout moche ? Pas quand il existe des moyens détournés de leur donner le design de notre choix ! Je vous propose aujourd'hui un petit tutoriel vous permettant de personnaliser vos inputs files pour qu'ils puissent prévisualiser l'image sélectionnée, ce qui est beaucoup plus logique et parlant qu'un nom de fichier. Un premier clic sur l'uploader vous proposera d'envoyer votre fichier, un second vous permettra de supprimer l'image préexistante ou d'annuler un envoi. De plus, cela fonctionne avec tous les types d'images, y compris les gifs ! Personnaliser un champ d'envoi d'images Comme pour tous les articles de tuto récents que j'ai réalisé, je vous invite à vous rendre sur CodePen pour retrouver le code ainsi que les commentaires qui vous permettront de le comprendre ! Si votre but est simplement de le copier/coller sur vos projets, faites attention à ne prendre que la 2e partie du CSS, la première n'est là que pour la présentation. See the Pen Tuto: Personnaliser un champ d'envoi d'images by Benjamin SANCHEZ (@B_Sanchez) on CodePen. By Benjamin Sanchez Laisser un commentaire Annuler la réponseVotre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *Comment Nom * E-mail* Site web Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire.