Background-image input file Parcourir

Version imprimable

06/08/2012, 19h44
seb-65

Background-image input file Parcourir

Bonsoir,

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

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
07/08/2012, 13h39
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 ?
07/08/2012, 14h05
mcoutant

Bonjour Seb-65,

as tu essayer de changer le css en utilisant:

Code:

input[type="file"]{}
07/08/2012, 14h12
mcoutant

Je viens de trouver un tutos sur developpez.net :mrgreen:, je t'invite donc à y jeter un oeil -> Personnaliser les champs d'un formulaire
07/08/2012, 14h41
thelvin

Citation:

Envoyé par 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 ?

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.
07/08/2012, 17h18
seb-65

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

@thelvin

Citation:

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...
07/08/2012, 20h11
mcoutant

Dans le tutos que je t'ai donné tu a normalement tout le code expliqué :ccool:
08/08/2012, 15h35
seb-65

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

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
08/08/2012, 15h52
mcoutant

Effectivement j'avais pas vérifier sur IE (d'ailleurs j'aurais dû commencer par là :cry:) du coup je laisse ma place si quelqu'un à une réponse je serais heureux de voir la solution :aie:
08/08/2012, 16h06
seb-65

Bon cela me rassure un peu...

IE n'aime pas trop que l'on "hack" les formulaires, je galère avec les forms sous IE et même avec Jquery j'obtiens des résultats très étrange...
08/08/2012, 16h10
mcoutant

Le problème c'est que IE n'aime pas grand chose :aie:

Et en trichant un peu ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
<style type="text/css">
div.inputs {
	position: relative;
}
 
div.image_lien {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}
 
input.fichier {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}
</style>
</head>
<body>
<div class="inputs">
	<input type="file" class="fichier" />
	<div class="image_lien">
		<input />
		<img src="http://www.24.com/images/btn_search.png" />
	</div>
</div>
</body>
</html>

09/08/2012, 09h53
Bisûnûrs

Ce que j'avais fait dans le tuto reste de la bidouille pour montrer que c'était possible. Mais il ne faudrait pas l'utiliser je pense, le champ de type file étant trop différent selon les navigateurs.

Pour actualiser le tuto, je l'ai fait y a un moment (5 ans tout de même) et ça fonctionnait sur IE8. Maintenant, pour le faire fonctionner aussi sur IE9, il suffirait de supprimer le onmousedown="return false;" du champ file.

Une autre solution serait d'utiliser Flash pour faire ton bouton, comme ça tu le desgines vraiment comme tu l'entends. Et en plus tu peux choisir le type de fichiers à sélectionner.
09/08/2012, 10h34
mcoutant

La solution de MindBuster marche très bien sur tout les naviguateurs, seul hic tu ne vois plus le chemin dans l'input, après faudrais que tu récupère le nom du fichier en js pour l'afficher à coté (sinon l'utilisateur va croire que ça n'a pas marché). :ccool: