Comment personnaliser <input type="file"> ?

Question

Est-il possible de modifier l'apparence de <input type="file"> ?

Answer 1

On ne peut pas modifier grand-chose sur le input[type=file] le contrôle lui-même.

Puisque le fait de cliquer sur un label correctement apparié avec une entrée l'activera/focusera, nous pouvons utiliser un élément label pour déclencher la boîte de dialogue de navigation du système d'exploitation.

Voici comment vous pouvez le faire

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}

<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

La feuille de style en cascade (CSS) du contrôle de formulaire le rendra invisible et ne prendra pas de place dans la mise en page du document, mais il sera tout de même existe afin qu'elle puisse être activée par l'intermédiaire du label .

Si vous voulez afficher le chemin choisi par l'utilisateur après la sélection, vous pouvez écouter la commande change avec JavaScript et ensuite lire le chemin que le navigateur met à votre disposition (pour des raisons de sécurité, il peut mentir pour vous indiquer le chemin exact). Une façon de rendre la chose plus agréable pour l'utilisateur final est d'utiliser simplement le nom de base du chemin d'accès qui est renvoyé (de sorte que l'utilisateur voit simplement le nom de fichier choisi).

Il existe un grand guide par Tympanus pour avoir coiffé ça.

Answer 2

Quelque chose comme ça peut-être ?

<form>
  <input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>

<script>
$(document).ready( function() {
  $('#falseinput').click(function(){
    $("#fileinput").click();
  });
});
$('#fileinput').change(function() {
  $('#selected_filename').text($('#fileinput')[0].files[0].name);
});

</script>

Answer 3

  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

pourquoi pas ? ^_^

Voir l'exemple aquí

Answer 4

Dans webkit, vous pouvez essayer ceci...

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}

Answer 5

Tout d'abord, c'est un conteneur :

<div class="upload_file_container">
    Select file!
    <input type="file" name="photo" />
</div>

Le second, c'est un style CSS, si vous voulez réaliser plus de personnalisation, il suffit de garder les yeux ouverts :)

.upload_file_container{
   width:100px;
   height:40px;
   position:relative;
   background(your img);
}

.upload_file_container input{
   width:100px;
   height:40px;
   position:absolute;
   left:0;
   top:0;
   cursor:pointer;
}

Cet exemple n'a pas de style pour le texte à l'intérieur du bouton, il dépend de la taille de la police, il suffit de corriger les valeurs de hauteur et de padding-top pour le conteneur.