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
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
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
- 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
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 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
- le div restreint en taille à comme fond l'image que tu as dessiné
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 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![]()
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager