Background-image input file Parcourir

**seb-65** · 06/08/2012, 19h44

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** · 07/08/2012, 13h39

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** · 07/08/2012, 14h05

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** · 07/08/2012, 14h12

Je viens de trouver un tutos sur developpez.net

, je t'invite donc à y jeter un oeil -> Personnaliser les champs d'un formulaire

**thelvin** · 07/08/2012, 14h41

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.

**seb-65** · 07/08/2012, 17h18

@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** · 07/08/2012, 20h11

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

**seb-65** · 08/08/2012, 15h35

@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

**mcoutant** · 08/08/2012, 15h52

Effectivement j'avais pas vérifier sur IE (d'ailleurs j'aurais dû commencer par là

) du coup je laisse ma place si quelqu'un à une réponse je serais heureux de voir la solution

**seb-65** · 08/08/2012, 16h06

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

**mcoutant** · 08/08/2012, 16h10

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

**MinDBuSteR** · 08/08/2012, 19h41

Et en trichant un peu ?

Code :

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

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>

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

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.

**mcoutant** · 09/08/2012, 10h34

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

Background-image input file Parcourir

CSS

Discussions similaires

Partager

Partager