<input type=“file”> - custom styles/css

Est-il un moyen de faire <input type="file"> regarder la même dans tous les navigateurs à l'aide de CSS ?

Dupes: stackoverflow.com/search?q=style+input+file
double possible de Comment style "fichier d'entrée" avec CSS3 / Javascript ?
bonne question... mais j'ai tout essayé, ne fonctionne pas... j'espère que quelqu'un a la réponse!
Pourquoi est-il nécessaire de répondre à une question qui a des dizaines et des dizaines de bien répondu doublons?

OriginalL'auteur Pydev UA | 2010-08-31

  1. 4

    Quirksmode.org a un article intéressant à ce sujet: http://www.quirksmode.org/dom/inputfile.html

    OriginalL'auteur Lekensteyn

  2. 2

    essayer ce -

    1. Prendre un normal et le mettre dans un élément avec
      position: relative.
    2. À ce même élément parent, ajouter un
      normale et une image, qui
      avoir le bon les styles. Position
      ces éléments absolument, de sorte que
      ils occupent la même place que la
      .
    3. Définir le z-index de la de 2, de sorte qu'il se trouve sur
      top du style d'entrée/image.
    4. Enfin, définir l'opacité de l'
      de 0. Le devient maintenant efficacement
      invisible, et les styles
      entrée/image brille à travers, mais vous
      pouvez toujours cliquer sur le bouton "Parcourir"
      bouton. Si le bouton est positionné
      en haut de l'image, l'utilisateur
      s'affiche, cliquez sur l'image et
      obtient la normale de sélection de fichier
      de la fenêtre. (Notez que vous ne pouvez pas utiliser
      visibility: hidden, parce que vraiment
      invisible élément est unclickable,
      trop, et nous devons le rester cliquable)
      Jusqu'ici, l'effet peut être
      réalisé par pur CSS. Cependant,
      une fonctionnalité qui manque encore.
    5. Lorsque l'utilisateur a sélectionné un fichier,
      dans le visible, le faux champ de saisie doit
      montrer le bon chemin d'accès à ce fichier,
      normal
      serait. C'est simplement une question de
      la copie de la nouvelle valeur de la à la faux d'entrée
      champ, mais nous avons besoin de JavaScript pour faire
      c'.

    Plus de détails - http://www.quirksmode.org/dom/inputfile.html

    OriginalL'auteur Sachin Shanbhag

  3. 1

    Vous pouvez essayer d'utiliser swfupload, un projet open source qui intègre un petit fichier Flash sur la page à la place du fichier d'entrée... Vous pouvez utiliser CSS pour le style le bouton qui déclenche le flash télécharger autant que vous le souhaitez.

    Inconvénient: il peut être difficile de travailler avec, et bien sûr, vos utilisateurs doivent disposer de flash.

    À l'envers: plusieurs fichiers sont disponibles à la fois dans la boîte de dialogue de téléchargement!

    OriginalL'auteur livingtech

  4. 1

    vous pouvez tout simplement le style de votre propre fichier de la touche input.
    il suffit de régler l'attribut CSS de votre élément d'entrée à style="display:none" et gérer un événement de clic en javascript. pour en savoir plus:
    À l'aide de fichier caché des éléments d'entrée à l'aide de la méthode click()

    EDIT: s'avère que cela ne fonctionne plus pour des raisons de sécurité. un petit hack est juste de définir le style css à visibility:hidden.
    Voici une JSFiddle où je place mon <input> champ quelque part à la fin de ma page et de déclencher l'openFileDialog avec un <a> élément.

    //html
<input id="openFileDialog" type="file" id="files" name="files[]" accept=".json, .txt" />

//js
$("#openFile").on("click", function () {
    //throws an error if browser doesn't support file upload
    checkFileApiCompatibility();

    //opens File Dialog
    $("#openFileDialog").click();
    $("#openFileDialog").on('change', function(){
        openFile(this);
    });
});

    OriginalL'auteur philx_x