Enfin une solution pour styler un input file !

Par j0k le mardi 11 septembre 2007, 10:24 dans webdesign - 10163 vues

Les input files sont vraiment une plaie pour les graphistes / intégrateurs parce que c'est une des seules parties d'un formulaire que l'on ne peut absolument pas rendre joli. Le bouton parcourir aura la tête que le navigateur lui donnera, ce qui est bien souvent frustrant.
Des approches ont été faite, notamment en plaçant carrément un layer par dessus l'input. Mais forcément cette astuce ne fonctionnait que pour IE, ce qui limite sa popularité.

Shaun Inman propose une solution intéressante. Il englobe son input avec un label et réduit l'opacité de l'input à zéro. Il place ensuite une image en fond du label et le résultat donne une image cliquable pour uploader un fichier. La technique ne fonctionne pas sous Opéra, mais l'input file est affiché tel quel du coup, au final on ne trouble pas l'utilisateur.

Cependant le script n'est pas totalement "génial" à mon avis. Etant donné qu'une fois que l'on a choisit un fichier, rien ne nous indique que celui ci est présent. Il faudrai rajouter une action JavaScript qui changerai l'image de fond afin d'indiquer qu'un fichier a été sélectionné. Après si le déclenchement de l'upload se fait lors de la sélection du fichier, le problème ne se pose plus :-)

7 commentaires en tout !

1. Anonymous le mercredi 12 septembre 2007, 09:19 #permalien
Anonymous

Interessant, mais effectivement pas totalement au point. A suivre donc.

2. poulpillusion le mercredi 03 octobre 2007, 05:52 #permalien
poulpillusion

C'est très intéressant, en effet. A compléter, comme le suggère l'article...
Nous pouvons donc désormais skinner des champs input file. D'après un article précédent, nous pouvons également skinner checkboxes et boutons radio...

Mais quelqu'un saurait-il skinner efficacement les scrollbars, sous IE et FF au moins ?

3. j0k le mercredi 03 octobre 2007, 08:26 #permalien
j0k

Sous IE, ça fonctionne (pas valide w3c) mais sous Firefox et Opéra je n'ai rien trouvé pour.
A part un JavaScript mais il était sous licence et payant :-/

4. poulpillusion le jeudi 04 octobre 2007, 03:39 #permalien
poulpillusion

En fait je sais que c'est faisable, je l'ai vu sur le panier du site de gucci.
Ils utilisent scriptaculous on dirait...

5. j0k le samedi 06 octobre 2007, 11:25 #permalien
j0k

Je suis allé voir leur panier ici : http://www.gucci.com/fr/checkout/empty_bag.asp
Et les scollbars ne sont pas skinnées...

6. j0k le lundi 08 octobre 2007, 08:08 #permalien
j0k

Woow vraiment intéressant ! Je vais regarde ça :-)

7. poulpillusion le lundi 08 octobre 2007, 10:40 #permalien
poulpillusion

En fait, il faut remplir le panier, avec 3 cravates par exemple... tu constateras alors qu'il y a un div qui liste les produits que tu as achetés (id="shopping-bag-contents").
A coté de ce div il y a une scrollbar (div avec id="scrollbar")... Ce n'est pas une scrollbar du navigateur mais cela fonctionne aussi bien (avec la molette, etc... )

Pensez à vous inscrire !

  • C'est rapide
  • Utiliser votre compte Facebook
  • Ou votre Open ID
Laisser un commentaire





Catégories


Tags


Liens