Ok donc façon très simple et pure css de créer votre fichier d'entrée personnalisé.
Utilisez des étiquettes, mais comme vous le savez d'après les réponses précédentes, l'étiquette n'invoque pas la fonction onclick dans Firefox, peut être un bogue mais n'a pas d'importance avec ce qui suit.
<label for="file" class="custom-file-input"><input type="file" name="file" class="custom-file-input"></input></label>
Ce que vous faites, c'est styliser l'étiquette pour qu'elle ressemble à ce que vous voulez
.custom-file-input {
color: transparent;/* This is to take away the browser text for file uploading*/
/* Carry on with the style you want */
background: url(../img/doc-o.png);
background-size: 100%;
position: absolute;
width: 200px;
height: 200px;
cursor: pointer;
top: 10%;
right: 15%;
}
maintenant, masquez simplement le bouton d'entrée réel, mais vous ne pouvez pas le définir sur visability: hidden
Alors rendez-vous invisible en définissant opacity: 0;
input.custom-file-input {
opacity: 0;
position: absolute;/*set position to be exactly over your input*/
left: 0;
top: 0;
}
maintenant, comme vous l'avez peut-être remarqué, j'ai la même classe sur mon étiquette que mon champ de saisie, c'est parce que je veux que les deux aient le même style, donc partout où vous cliquez sur l'étiquette, vous cliquez en fait sur l'invisible champ de saisie.