Discussion :

[mikael2235]

Bonjour,

J'utilise un Input type=FILE dans une de mes pages web, mais la case et le bouton parcourir sont collés et prennent trop de place en largeur.

Je cherche à mettre le bouton parcourir à la ligne en dessous. Savez vous comment faire ?

Merci

[Bisûnûrs]

Ce n'est pas possible.

[eckerdecker]

Il n'est effectivement pas possible de modifier la balise input type file afin d'avoir le bouton parcourir à la ligne.
En revanche avec un peu d'astuce et beaucoup de tests pour t'assurer que cela fonctionne bien sur tous les navigateurs voici ce qui peut être éventuellement réalisable :

Code HTML

Code :

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

1
2
3
4
5
6
7
8
 
<form name="upload" method="POST" action="upload.php" enctype="multipart/form-data">
   <input type="text" name="filepath" onfocus="this.blur();" />
   <div class="inputfilecustom">
      <input type="file" name="file" onchange="document.upload.filepath.value=this.value;" />
   </div>
   <input type="submit" value="OK" />
</form>

- j'ai ajouté un champ texte impossible à cibler, tu peux aussi mettre l'attribut disabled, ou encore le laisser normal. Il sert à recevoir la valeur de ton input type file
- j'ai encapsulé le input type file dans un div sur lequel on va mettre quelques styles

Il te faut dessiner un joli bouton "Parcourir".

Code CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
.inputfilecustom {
width:100px; /*largeur de ton bouton*/
height:20px; /*hauteur de ton bouton*/
background:url(btn-parcourir.jpg) no-repeat;
text-align:right;
overflow:hidden;
}
.inputfilecustom input {
opacity:0;
}

- le div restreint en taille à comme fond l'image que tu as dessiné
- le input type file est mis en opacité 0% : il est invisible (attention ce n'est pas la même syntaxe pour IE)

Quand l'utilisateur crois cliquer sur le bouton parcourir il clique en fait sur le input type file, il choisi le fichier, une fois validé javascript reporte sa valeur dans le input type text au dessus

C'est de la bidouille, on adhère ou pas