Enfin une solution pour styler un input file !

j0k3r_n0ir · Webmaster Inscrit le: 13 Oct 2004 Messages: 2446 Localisation: Paris ...

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 (lien externe). 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 Smile

_________________
La vie au fond, ce n'est qu'un court passage sur Terre.
Alors ne soit pas con, profites de tout ... fini ta bière !

Clem · Invité

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

poulpillusion · Inscrit le: 03 Oct 2007 Messages: 4

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 ?

j0k3r_n0ir · **Posté le:** Mer Oct 03, 2007 20:26 *Pas de sujet à ce message*

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 :-/
_________________
La vie au fond, ce n'est qu'un court passage sur Terre.
Alors ne soit pas con, profites de tout ... fini ta bière !

poulpillusion · Inscrit le: 03 Oct 2007 Messages: 4

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

Ils utilisent scriptaculous on dirait...

j0k3r_n0ir · **Posté le:** Sam Oct 06, 2007 11:25 *Pas de sujet à ce message*

Je suis allé voir leur panier ici : http://www.gucci.com/fr/checkout/empty_bag.asp

Et les scollbars ne sont pas skinnées...
_________________
La vie au fond, ce n'est qu'un court passage sur Terre.
Alors ne soit pas con, profites de tout ... fini ta bière !

poulpillusion · Inscrit le: 03 Oct 2007 Messages: 4

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... )

j0k3r_n0ir · **Posté le:** Lun Oct 08, 2007 20:08 *Pas de sujet à ce message*

Woow vraiment intéressant !
Je vais regarde ça Smile

_________________
La vie au fond, ce n'est qu'un court passage sur Terre.
Alors ne soit pas con, profites de tout ... fini ta bière !