Réponse acceptée !
Bon, pas de réponses, et aucune info trouvée sur le web pour personnaliser un input file comme je le veux...
Je reviens donc avec la solution que j'ai inventée :
- constat : aucune possibilité de personnaliser le input file pour de vrai, seulement des "astuces"
- la propriété css height permet de changer la hauteur du bouton
- pour sa largeur, il faut jouer sur la taille de la police, c'est pas évident, car width ne fonctionne pas. Si le bouton doit être large, je conseille une grande police pour avoir un grand bouton et ensuite diminuer sa zone cliquable en l'entourant de 2 divs par-dessus sur les côtés.
- sous IE (6), on peut se débarrasser du champ texte à côté du "Parcourir" avec width 0.
- il faut rendre le input transparent et le mettre le bouton au-dessus du faux bouton de manière à ce que quand on clique sur le faux bouton, en réalité on clique sur le vrai.
- sous Firefox il reste à mettre une div au-dessus du champs texte à côté du bouton parcourir pour ne plus qu'il soit cliquable (et la propriété cursor ne fonctionne pas sous FF sur input file au fait). Enfin mettre un z-index sur l'input et ses div attachées qui soit inférieur aux éléments alentours, pour qu'il n'empêche pas de cliquer ailleurs. Attention aussi à mettre l'input dans une div qui soit fixée en absolue, et non pas mettre la position absolue directement sur l'input, sinon il y a un bug avec la zone cliquable du champ texte.
- enfin un petit effet onmouseover sur l'input qui modifie le faux bouton et l'illusion est parfaite.
C'est assez complexe, mais avec des efforts ça rend très bien. Le seul exemple que je connaisse (à part celui de mon futur site
), c'est la nouvelle version de Yahoo mail : créez un nouveau message, et regardez le bouton "Joindre". Je ne sais pas exactement comment ils ont fait, mais je suppose qu'ils utilisent la même technique que moi. Ce qui me fait penser ça en particulier c'est qu'il n'y a pas de cursor:pointer sur ce bouton dans FF (contrairement aux autres boutons de l'interface), ce qui est typique d'un input file caché... voili voilou, bonne chance à tous