Discussion :

[seb-65]

Bonsoir,

J'essaye de modifier le bouton "Parcourir..." de mes input file mais sans succès

Je voudrais insérer une image en backgroud et enlever le texte "Parcourir..." avec du CSS.

Avez-vous un exemple fonctionnel sur la plupart des navigateurs à me donner ?

Merci

[seb-65]

Sur mes recherches, je trouve beaucoup de script JavaScrit / Jquery couplé a du CSS, pour modifier le design du input et du bouton...

A première vue, il n'est pas possible de le faire uniquement avec CSS ?

[mcoutant]

Bonjour Seb-65,

as tu essayer de changer le css en utilisant:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

input[type="file"]{}

[mcoutant]

Je viens de trouver un tutos sur developpez.net , je t'invite donc à y jeter un oeil -> Personnaliser les champs d'un formulaire

[thelvin]

Sur mes recherches, je trouve beaucoup de script JavaScrit / Jquery couplé a du CSS, pour modifier le design du input et du bouton...

A première vue, il n'est pas possible de le faire uniquement avec CSS ?

Sauf erreur de ma part, le JavaScript ne sert qu'à se simplifier un peu la vie pour placer les contrôle, et à récupérer le nom du fichier sélectionné.

Il y a moyen de faire exactement ce qu'ils proposent uniquement en CSS, mais dans ce cas l'utilisateur ne verra plus le fichier qu'il a sélectionné, après l'avoir sélectionné. Alors qu'il a l'habitude de le voir écrit à côté du bouton.

Les input file, étant composés de deux contrôles : (champ texte ou label)/bouton, au choix du navigateur, les conventions CSS habituelles ne disent pas ce qu'il faut en faire.
Autrement dit, ce n'est pas prévu pour être simple.

[seb-65]

@mcoutant
Je n'arrive pas à changer le background-image du bouton.

@thelvin

Il y a moyen de faire exactement ce qu'ils proposent uniquement en CSS, mais dans ce cas l'utilisateur ne verra plus le fichier qu'il a sélectionné, après l'avoir sélectionné. Alors qu'il a l'habitude de le voir écrit à côté du bouton.

Oui, mais comment faire en CSS, as-tu un exemple s'il te plait ?

Je sais renvoyer le nom du fichier sélectionné par une fonction JS simplement dans un span ou div...

[mcoutant]

Dans le tutos que je t'ai donné tu a normalement tout le code expliqué

[seb-65]

@mcoutant
Le tuto http://j-willette.developpez.com/tut...inputfile.html ne fonctionne pas sous IE

Je viens de faire le test sous Internet Explorer 9 et le bouton parcourir n'est pas clicable !! Sous FF pas de problème !

Pouvez-vous essayer de cliquer sur Parcourir et voir si la fenêtre de sélection s'ouvre bien avec IE ??

Merci