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.7/5 (2 votes) Derniéres modifications : 08/08/2010 à 05:35:39 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 [Tutoriel]Changer la couleur d'un objet sous photoshop 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

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.7/5 (2 votes)
Derniéres modifications : 08/08/2010 à 05:35:39
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