Discussion :

[alex012ytreza]

Bonjour, je reviens vers vous car j'ai encore des problèmes avec mon CSS, voila mon formulaire :

et le code :

Code PHP :

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

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 :

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.

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

[psychadelic]

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 :

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

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

css

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

[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

[Invité]

Bonjour,

1- "input file personnalisé"

Ça m'a pris 10 secondes :

• https://www.creativejuiz.fr/blog/tut...nnalise-css-js
• https://j-willette.developpez.com/tu...mulaire/#LII-E

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

Code HTML :

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

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 html :

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

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 css :

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

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

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(/^.*[\\\/]/, '');
  });
});

[alex012ytreza]

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

Code HTML :

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

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.