donc voila je viens de me creer un petit uploader (http://upload.miew.fr/) , mais voila le soucis quand je modifie son disgn pas moyen d'enlever le bouton "choose file". j'ai essayé divers solutions sur le web mais ca ne convient pas :/

si vous en avez a proposer ca serais sympa :)

7 réponses


C'est impossible, l'aspect est choisis par systeme d'exploitation ou ton navigateur.

mais il y a certaines "bidouilles" que l'ont peut faire pour résoudre ce probleme
je te laisse un lien :
http://www.quirksmode.org/dom/inputfile.html

J'ai bien très bien compris ce que tu voulais exactement, mais il y a des moyens de vraiment styliser les input au maximum, je t'invite à voir ces 2 tutos :
http://www.grafikart.fr/tutoriels/html-css/personnaliser-formulaire-html-29
http://www.grafikart.fr/tutoriels/html-css/animer-transition-css3-179

Pardon mais je confirme ce qu'a dis Nuteylla, il n'y a malheureusement pas de moyen de styliser (modifier l'affichage va ces atributs css) les inputs de type file. On essai plutôt de donner l'illusion qu'un style a été réalisé!
le principe est de mettre un input de type text et un button sous ton input de type file. ensuite à ton input de type on lui attribut une opacité de 0, ainsi ton input file existe mais il est "invisible", tu le vois pas, par contre tu vois l'input text et button qui sont en dessous et que tu peut très facilement stylisé.

Cette solution est à mon sens la moins pire. Le problème c'est qu'on perd le système de drop de fichier sur l'input type file directement. Sinon on peut le réajouter en JS.

Pour moi : si tu as besoin de garder certaines fonctionnalités de l'input file, il vaut mieux le laisser tel quel. Sinon il faut faire la technique de l'input file caché sous un bouton et un input text.

Les solutions JS sont plutôt lourde et supprime les fonctionnalités d'accessibilité elles aussi.

Tu peux regarder du coté de uniform, un plugin jquery très bien fait !

Je confirme, la plupart des éléments de formulaires sont stylisé par le système d'exploitation et le navigateur (checkbox, radio, select, file).
Pour les modifier, il faut faire appel à Javascript... ^^

Tu peux utiliser "uploadify" qui te permet de modifier la tronche de l'input, de faire l'upload en ajax, mais niveau compatibilité, tu es restreint.

Si tu veux remplacer ton input file par un bouton:
<input type="file" id="file" name="file" style="display:none"/>
<button onclick="file.click()">Le contenu personnalisé de ton bouton</button>

Si tu veux remplacer ton input file par du texte:
<input type="file" id="file" name="file" style="display:none"/>
<a onclick="file.click()">Ton texte</a>