Faire un input file stylé en Css (X)html et Javascript
ybouane Faire un input file stylé en Css (X)html et Javascript Note : 4.8/5 (3 votes) Derniéres modifications : 11/02/2012 à 20:06:25 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 Bonjour, 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> Essayer 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: Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Modifier le curseur en image ou curseurs proposés en CSS/(X)html Système d'onglets en Javascript, (X)html et CSS dans la même page Afficher/Cacher un div(element) en javascript Faire un calendrier en javascript avec un effet de transparence Faire des onglet en (X)html/CSS Recharger/Actualiser une page en javascript Background scrollable avec overflow:auto; sous firefox (X)html/CSS Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires 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 :) Envoyé par ayfotvtb le 24/01/2012 à 12:30:08 20 Envoyé par PrX70 le 29/03/2012 à 16:02:29 Bonjour, Tout d'abord, merci pour ce petit tuto. J'ai appliqué votre méthode en la modifiant par rapport à mon contexte. Deux compléments intéressants: - appliquer [cursor: pointer;] dans le style "input_file_style_file". Ca permet de savoir que l'on passe sur le contrôle <input type="file"...>. - appliquer [z-index=-1;] dans le style de l'image, sans quoi l'image masque le contrôle. PS: je vais essayer d'utiliser un tag <a> plutôt que <img> pour utiliser le hangover et changer l'image. Encore merci. Amicalement Envoyé par PrX70 le 29/03/2012 à 16:07:03 Erratum: .. pour utiliser le "handover"... C'est moi qui ai la "hangover", je crois. Pourtant j'ai pas bu récemment... lol Envoyé par Stephane le 08/06/2012 à 10:32:09 Bonjour malheureusement cette technique ne fonctionne pas sous IE8 Envoyé par Max01 le 11/06/2012 à 13:45:21 Je voudrais savoir, où est-ce que les fichiers envoyer sont stocker? Envoyé par fabya le 14/06/2012 à 08:12:14 merci pour ce tuto qui marche bien,mais je veux savoir si on envoyais un fichier dans base de données en mysql,on le retrouver tel que?. aussi cette technique est utilisable pour le chargement des fichiers à expedier,comprenez moi je ne suis trop initié à la matière. Envoyé par LpRwmQXQ le 10/10/2012 à 06:34:40 The paragon of undretsanidng these issues is right here! Envoyé par cansado76 le 24/11/2012 à 17:43:48 Je commence un petit hebergeur d'image et je ne sais pas où mettre le code, en plus en php et html je suis un peu nul ... Envoyé par yujui le 10/01/2013 à 12:24:43 ptdtttttd

Faire un input file stylé en Css (X)html et Javascript

ybouane

Faire un input file stylé en Css (X)html et Javascript
Note : 4.8/5 (3 votes)
Derniéres modifications : 11/02/2012 à 20:06:25
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

Bonjour,
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&eacute; 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&eacute;lection de fichier personalis&eacute;:

        <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>

Essayer

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:

Commentaires

Ajouter un commentaire

Les commentaires

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 :)

Envoyé par ayfotvtb le 24/01/2012 à 12:30:08

Envoyé par PrX70 le 29/03/2012 à 16:02:29

Bonjour,

Tout d'abord, merci pour ce petit tuto.
J'ai appliqué votre méthode en la modifiant par rapport à mon contexte.

Deux compléments intéressants:
- appliquer [cursor: pointer;] dans le style "input_file_style_file".
Ca permet de savoir que l'on passe sur le contrôle <input type="file"...>.
- appliquer [z-index=-1;] dans le style de l'image, sans quoi l'image masque le contrôle.

PS: je vais essayer d'utiliser un tag <a> plutôt que <img> pour utiliser le hangover et changer l'image.

Encore merci.

Amicalement

Envoyé par PrX70 le 29/03/2012 à 16:07:03

Erratum: .. pour utiliser le "handover"...

C'est moi qui ai la "hangover", je crois. Pourtant j'ai pas bu récemment... lol

Envoyé par Stephane le 08/06/2012 à 10:32:09

Bonjour malheureusement cette technique ne fonctionne pas sous IE8

Envoyé par Max01 le 11/06/2012 à 13:45:21

Je voudrais savoir, où est-ce que les fichiers envoyer sont stocker?

Envoyé par fabya le 14/06/2012 à 08:12:14

merci pour ce tuto qui marche bien,mais je veux savoir si on envoyais un fichier dans base de données en mysql,on le retrouver tel que?. aussi cette technique est utilisable pour le chargement des fichiers à expedier,comprenez moi je ne suis trop initié à la matière.

Envoyé par LpRwmQXQ le 10/10/2012 à 06:34:40

The paragon of undretsanidng these issues is right here!

Envoyé par cansado76 le 24/11/2012 à 17:43:48

Je commence un petit hebergeur d'image et je ne sais pas où mettre le code, en plus en php et html je suis un peu nul ...

Envoyé par yujui le 10/01/2013 à 12:24:43

ptdtttttd