- Styles personnalisés / CSS - Retrouvez les réponses et les commentaires concernant cette question" />
Dev Faq
9
votes

- Styles personnalisés / CSS

Y a-t-il un moyen de faire regarder la même chose dans tous les navigateurs en utilisant des CSS?

4 commentaires

DuPes: Stackoverflow.com/search?q=style+Input+file

Dupliqué possible de Comment styliser "fichier d'entrée" avec CSS3 / JavaScript? < / a>

Nice 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 présente des dizaines et des dizaines de doublons bien répondues?

4 Réponses :

4
votes

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

0 commentaires
2
votes

Essayez ceci -

  1. prenez une normale et mettez-la dans un élément avec Position: Relatif.
  2. à ce même élément parent, ajoutez un normal et une image qui avoir les styles corrects. Position ces éléments absolument, de sorte que ils occupent le même endroit que le .
  3. Définissez l'index Z de la sur 2 afin qu'il se trouve sur haut de l'entrée / image de style.
  4. Enfin, définissez l'opacité de la à 0. Le maintenant devient efficacement Invisible, et les styles entrée / image brille, mais vous peut toujours cliquer sur le "Parcourir" bouton. Si le bouton est positionné En haut de l'image, l'utilisateur semble cliquer sur l'image et Obtient la sélection de fichier normale la fenêtre. (Notez que vous ne pouvez pas utiliser Visibilité: caché, parce qu'un véritable L'élément invisible est neckable, aussi, et nous avons besoin de rester cliquable) Jusqu'à présent, l'effet peut être atteint par Pure CSS. Cependant, une caractéristique manque toujours.
  5. lorsque l'utilisateur a sélectionné un fichier, le champ de saisie visible et faux devrait montrer le chemin correct vers ce fichier, comme une normale aurait. C'est simplement une question de Copier la nouvelle valeur de la fausse entrée champ, mais nous avons besoin de JavaScript pour faire Ceci.

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

0 commentaires
1
votes

Vous pouvez essayer d'utiliser SWFUPLOAD, un projet open source qui intégre un minuscule fichier flash sur la page à la place de l'entrée de fichier ... Vous pouvez utiliser CSS pour styler le bouton qui déclenche le téléchargement de flash, mais vous voulez.

inconvénient: il peut être délicat de travailler avec et bien sûr, vos utilisateurs doivent avoir un flash.

Upside: plusieurs fichiers sont sélectionnables à la fois dans la boîte de dialogue de téléchargement!

0 commentaires
1
votes

Vous pouvez simplement styler votre propre bouton d'entrée de fichier. Il suffit de définir l'attribut CSS de votre élément d'entrée sur style = "Affichage: Aucun" et gérez un événement de clic dans JavaScript. En plus de lecture: Utilisation des éléments d'entrée de fichier cachés à l'aide de la méthode CLIC () < P> Edit: Il est possible que cela ne fonctionne plus pour des raisons de sécurité. Un petit hack doit simplement définir le style CSS sur Visibilité: caché . Voici un jsfiddle où je place mon champ quelque part À la fin de ma page et déclencher l'openfiledialog avec un élément . xxx

0 commentaires

Articles qui pourrait vous intéresser :

 Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor