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

Le 29/07/2013 à 05:24:42
Note: 4/5
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:

<!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 Tutoriels similaires

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