Menu
Outils
Référencement
Flash
Services
Compteurs
Scripts et tutoriaux
Kits graphiques/ Designs
Activité
Recherche
|
Faire un input file stylé en Css (X)html et Javascript |
|---|
Faire un input file stylé en Css (X)html et JavascriptNote : 4.5/5 (1 vote) Derniéres modifications : 29/08/2009 à 22:44:19 Mots-Clés : Input file stylé css modifier style selecteur de fichier html utiliser javascript changer couleur bouton d'un <input type="file" /> valide css html javascript dans ce tutoriel, je vais vous apprendre à styler des champs de formulaires de fichier(input file) en utilisant le (X)html, le CSS et le Javascript. cette methode est compatible avec tout les navigateurs(ceux testés), et assez simple à comprendre. Pour commencer, il faut savoir que les champs input file ne sont pas très personnalisables(à part leur taille), dans ce tutoriel, je vais vous montrer une methode simple qui permet d'avoir le résultat recherché. Bon pour commencer, il y aura le vrai input file et un autre qui est faux et qui sera constitué d'un champ de texte et du bouton parcourir. Le faux input file sera par-dessous le vrai, et le vrai lui sera transparent(opacité 0). Le vrai input file ne peut être mis en display:none; ou en visibility:hidden; car il disparaitra et nous nous voulons qu'il soit transparent et que le faux input file serve de "fond".
Finalement, un code javascript sera ajouté et consistera à afficher la valeur du vrai input file dans le champ texte du faux(input file). j'espère que les explications ont étés claires. Voici le code: Code: (X)html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Faire un input file stylé en css/html/javascript</title> <style type="text/css"> .input_file_style_file { opacity:0.0; -moz-opacity:0.0; -khtml-opacity:0.0; filter:alpha(opacity=0); height:23px; } .input_file_style_new { margin-top:-23px; } .input_file_style_new img,.input_file_style_new input { vertical-align:middle; } .input_file_style_new input { border:1px solid #cccccc; height:16px; margin:1px; margin-right:2px; padding:1px; } </style> </head> <body> Voici un champ de sélection de fichier personalisé: <div class="input_file_style"> <input type="file" size="70" name="file" id="file" class="input_file_style_file" /><br /> <div class="input_file_style_new"> <input type="text" size="70" id="file_new" readonly="readonly" /><img src="bouton.png" alt="Parcourir" /> </div> </div> <script type="text/javascript"> //<!-- document.getElementById('file').onchange=function(){ document.getElementById('file_new').value = document.getElementById('file').value; }; //--> </script> </body> </html> Malheureusement cette technique ne fonctionne pas sur Internet Explorer 6. Mais elle fonctionne sur tout les autres navigateurs Pour toutes questions ou commentaires, veuillez utiliser le formulaire de contact ou me contacter par MP, vous pouvez aussi utiliser le forum. merci, j'espère que ce tutoriel vous a plus et vous sera utile. Scripts et tutoriaux similaires à celui ci:
CommentairesAjouter un commentaireLes commentairesEnvoyé par rodolphejb le 13/10/2009 à 16:12:13
Voici un bon tuto http://www.appelsiini.net/projects/filestyle/demo.html qui utilise jquery et qui fonctionne bien sous IE 6 :-)
Envoyé par Julien le 13/10/2009 à 17:28:24
Bein... ça marche pas sous IE... ?
Envoyé par maximeleboss le 31/01/2010 à 16:05:17
et si on ajoute un bouton envoyer sa marche ?
Envoyé par ybouane le 16/02/2010 à 00:03:49
@Julien: tu a probablement une version supérieur à IE6 qui supporte la technique utilisée.
@maximeleboss: oui(si j'ai bien compris) essaye: <input type="button" value="envoyer" /> Cordialement :) |
