Personnaliser les input file

Version imprimable

2 pièce(s) jointe(s)

Bonjour, je reviens vers vous car j'ai encore des problèmes avec mon CSS, voila mon formulaire :
Pièce jointe 497599
et le code :
Code:

1 2 3 4 5 6 7 8 9 echo "<form id=\"ajoutImg\" action=\"ajout-image.php\" method=\"POST\" enctype=\"multipart/form-data\">"; echo '<p><strong>Ajouter des images (format PNG/JPG, taille maximale 1Mo).</strong></p>'; echo '<p>Ajouter une image : <input id="btnParcourir" type="file" name="img1" accept="image/png, image/jpeg" /><button class="viderChamps" type="button" onclick=document.getElementsByName("img1")[0].value="">Vider</button ></p>'; echo '<p>Ajouter une image deuxième image : <input id="btnParcourir" type="file" name="img2" accept="image/png, image/jpeg" /><button class="viderChamps" type="button" onclick=document.getElementsByName("img2")[0].value="">Vider</button ></p>'; echo '<p>Et une troisième : <input id="btnParcourir" type="file" name="img3" accept="image/png, image/jpeg" /><button class="viderChamps" type="button" onclick=document.getElementsByName("imgFruit")[0].value="">Vider</button ></p>'; echo '<br /><br /><input id="valider" type="submit" value="Valider">'; echo "</form>";
Il y a deux choses que je voudrais faire
premièrement, aligner les boutons automatiquement au bout du texte le plus long pour obtenir quelque chose de ce genre :
Pièce jointe 497603
et ensuite je voudrais personnaliser les input file, en faisant des recherches j'ai vu que ce n'était pas possible de manière directe, j'ai vu différentes manières comme en utilisant un label mais le problème de ces solutions c'est qu'on ne voit plus le nom de fichier importé.
Y a t il une solution actuellement pour le faire directement (les tutos que j'ai vu datent de 2017)
sinon comment peut on faire pour personnaliser le bouton et avoir le nom du fichier à côté?
Merci.

14/08/2019, 18h52
alex012ytreza

J'ai trouvé la solution pour l'alignement, maintenant il me reste à trouver comment modifier les boutons input file.
Vous avez des idées qui permettent de modifier le bouton tout en gardant le nom du fichier à côté?
Merci.

on ne peut pas modifier le bouton par contre on peut le rendre invisible et utiliser un label que l'on peut redessiner comme on veut.

exemple: (google=>css customise input file)
Code:

1 2 <input type="file" name="file" id="file" class="inputfile" /> <label for="file">Choose a file</label>
css
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .inputfile + label { font-size: 1.25em; font-weight: 700; color: white; background-color: black; display: inline-block; cursor: pointer; } .inputfile:focus + label, .inputfile + label:hover { background-color: red; }
si on veut pas de label on peut aussi jouer avec un attribut ::before

16/08/2019, 03h05
alex012ytreza

Merci pour votre réponse,
Je connaissais la technique des labels mais le problème c'est que si on utilise cette technique on ne voit plus le nom du fichier importé ce qui je trouve est quand même important car j'ai plusieurs input file sur la page et des bouton pour les vider, ça permet à l'utilisateur de voir ou il en est.
Il y a une solution en JS qui permet de le faire bien mais comme ce n'est pas une grande priorité je laisserai ceux de base pour le moment.
Si quelqu'un connait une autre technique qui ne nécessite pas trop de code je suis preneur.
Merci

Bonjour,

1- :recherch: "input file personnalisé"

Ça m'a pris 10 secondes :

2- En allant au plus simple, et en combinant avec le code de psychadelic :

Code:

1
2
3
4
<p>
  <input type="file" name="file" id="file" class="inputfile" onchange="document.getElementById('input_text_file').textContent = this.value" />
  <label for="file">Choose a file</label> <span id="input_text_file"></span>
</p>

Mais ça nécessite de mettre des identifiants (id).
Avec plusieurs input, ça peut devenir pénible...

3- J'ai donc fait ma petite version perso : https://codepen.io/jreaux62/pen/BaBKgLY
Plus besoin d'identifiants (id)

Code:

1
2
3
4
5
6
7
8
<p>
  <label class="inputfile"><input type="file" name="file1"  />
  Choose file 1</label><span></span>
</p> 
<p>
  <label class="inputfile"><input type="file" name="file2"  />
  Choose file 2</label><span></span>
</p>

A noter : la classe "inputfile" est sur le label.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.inputfile {
  position:relative;
  font-size: 120%;
  color: darkblue;
  background-color: lightblue;
  display: inline-block;
  cursor: pointer;
  padding:5px 10px;
  margin-right:5px;
}
.inputfile input {
  position: absolute;
  left:-9999px;
  z-index: -1;
}
.inputfile input:focus,
.inputfile:hover {
    background-color: green;
  color:white;
}

Code:

1
2
3
4
5
6
7
8
"use strict";
const inputfiles = document.querySelectorAll('.inputfile input');
inputfiles.forEach( function(inputfile){
  inputfile.addEventListener('change',function(){
    console.log( inputfile.parentNode.children );
    inputfile.parentNode.nextSibling.textContent = inputfile.value.replace(/^.*[\\\/]/, '');
  });
});

Merci pour vos réponses,
J'ai donc utilisé la méthode
Code:

1 2 3 4 <p> <input type="file" name="file" id="file" class="inputfile" onchange="document.getElementById('input_text_file').textContent = this.value" /> <label for="file">Choose a file</label> <span id="input_text_file"></span> </p>
Je l'ai modifié un peu et elle fonctionne très bien, merci beaucoup.