Stylisation d'une entrée de type="fichier".

Question

J'ai lu des articles à ce sujet à plusieurs endroits.

J'ai essayé la méthode trouvée ici : http://www.quirksmode.org/dom/inputfile.html

Je n'ai pas réussi à le faire fonctionner. J'ai donc essayé une méthode CSS/HTML et cela fonctionne à merveille dans Firefox, Chrome, Safari et Opera (toutes les dernières versions) mais pas dans (vous l'avez deviné) IE8.

Il a l'air bien, mais quand vous cliquez dessus, ça ne marche pas. Si vous double-cliquez dessus, il fonctionne.

Avez-vous une idée de la façon de faire fonctionner ce système en un seul clic ?

Actuellement, j'utilise les commentaires conditionnels d'IE pour dire aux utilisateurs d'IE de double-cliquer sur le bouton de sélection. Le site est en cours de conception et n'est pas encore accessible aux utilisateurs. J'aimerais résoudre ce problème avant qu'il ne soit mis en ligne, si possible.

Answer 1

Une solution intéressante qui vous permet de faire fonctionner le clic unique est d'utiliser un élément étiquette, et sa propriété "for" qui vous permet de le connecter à l'entrée. Un autre élément important de cette solution est d'appliquer filter:alpha(opacity=0) sur l'élément input.

HTML :

 <label for="fileupload"> 
     <input id="fileupload" type="file" >   
     <p>click here</p>
 </label>

CSS :

label {
   background-color: #ECECEC;
   display: block;
   width: 600px;
   height: 600px;
   cursor: pointer;
}

input[type="file"] {
   width: 100%;
   height: 100%;
   z-index: 100;
   position: relative;
   opacity: 0;
   filter:alpha(opacity=0); 
   cursor: pointer;
 }

Answer 2

J'ai trouvé une solution qui vous aidera à donner au bouton le style que vous souhaitez et à le maintenir en un seul clic dans tous les navigateurs.

En gros, créez un div et donnez-lui une classe ou un identifiant, pour les besoins de l'exemple, appelons-le "outer_div".

Placez ensuite votre entrée de fichier dans la "outer_div" et donnez-lui également un identifiant, pour cet exemple, appelons-le "file_input_name".

Vient ensuite le CSS...

Pour la "outer_div", donnez-lui les propriétés suivantes

    #outer_div{
    cursor:pointer;
    overflow:hidden;
    display:block;
    float:left;
    position:relative;
    width:83px;
    height:25px;
    background:url(your button image goes here) no-repeat; 
    }

Assurez-vous que votre bouton a les mêmes propriétés de largeur pour que cela fonctionne.

Ensuite, le CSS pour file_input_name :

  #file_input_name{
position:relative;
float:left;
cursor:pointer;
right:138px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
text-align: right;
        }

Cela devrait faire l'affaire. En fait, ce qui se passe, c'est que nous plaçons l'entrée du fichier de sorte que le bouton de navigation se trouve au-dessus de l'image d'arrière-plan au lieu de l'URL du fichier.

Je l'ai fait moi-même et cela fonctionne dans IE et Firefox / safari / chrome.

Faites-moi savoir comment vous vous en sortez ou si vous avez besoin de plus d'aide.

Answer 3

Je pense avoir trouvé deux solutions à votre problème. Vous utilisez : filter:alpha(opacity: 0) sur votre .file ce qui permet de masquer le bouton "Parcourir..." que l'on voit habituellement dans les contrôles de téléchargement.

La première solution consisterait à utiliser une condition pour définir la feuille de style en cascade qui remplacera l'image fantaisie "Select" par le bouton normal mais stylisé "Browse" lorsque l'utilisateur utilise IE.

La seconde consisterait à jouer avec la taille de l'écran. FileAttachment pour que le bouton caché "Parcourir..." s'adapte à la position de l'image "Sélectionner". À partir de là, il suffit de s'assurer que le bouton "Browse..." caché s'adapte à la position de l'image "Select". z-index du bouton est plus élevée que celle de l'image.

Faites-moi savoir si ces solutions répondent à vos besoins.

D

Answer 4

La raison pour laquelle ils doivent double-cliquer est que c'est la "zone de texte".

La première image ici est celle d'un contrôle de téléchargement IE8. Notez qu'il y a une zone de texte et un bouton. L'utilisateur clique sur le bouton OU double-clique sur la zone de texte pour faire apparaître le bouton.

[arg, désolé, ma réputation n'est pas assez élevée pour les photos]

Lorsque vous superposez cela, la zone de texte chevauche ce que vous voulez être un simple clic, ce qui nécessite un double clic.

L'image suivante montre le même contrôle de téléchargement de fichiers sans opacité, avec un bouton au-dessus, et un contour provenant de l'inspecteur DOM d'IE8. Si je clique sur la partie la plus à droite du rectangle bleu, un simple clic fonctionne, partout ailleurs il faut un double clic. Notez également le curseur d'édition de texte superposé à partir de l'entrée du fichier au-dessus du bouton.

[ image omise ]

La solution consiste à redimensionner/positionner l'entrée du fichier caché pour placer le bouton de navigation là où vous le souhaitez.

Answer 5

En utilisant quelques Bootstrap magique, je l'ai fait, c'est super facile.

Ok, après avoir inséré le lien vers Bootstrap css dans votre étiquette de tête, faites ceci :

<div class="fileUpload btn btn-primary"> <span>Upload</span> <input type="file" class="upload" /> </div>

Cela créera un fichier de type d'entrée, stylisé par le css bootstrap.

Et maintenant la partie délicate :

  .fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

Et c'est tout, vous avez maintenant un bouton fonctionnel (fichier de type entrée) avec du style.

J'ai trouvé cet article parce que j'ai eu le même problème, vous pouvez le consulter pour plus d'informations.