Comment modifier le texte du bouton "Choisir un fichier" ou "Parcourir" et le texte "Aucun fichier sélectionné". Exemple:

Question

J'ai suivant le code HTML pour l'affichage « Parcourir » ou « Choisissez un fichier »:

<input type="file" name="file" id="file"> 

Answer 1

Au lieu de changer le texte et les paramètres par défaut de l'élément d'entrée essayez d'utiliser une solution de contournement.

<div class="file"> 
    <label for="file-input">Pick a file</label> 
    <input type="file" id="file-input"> 
</div> 

et le design via style:

.file { position: relative; height: 30px; width: 100px; } 
.file > input[type="file"] { position: absoulte; opacity: 0; top: 0; left: 0; right: 0; bottom: 0 } 
.file > label { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: #666; color: #fff; line-height: 30px; text-align: center; cursor: pointer; } 

Working Demo

Answer 2

Vous créez un div avec un bouton et une durée:

<div> 
<input type="button" onclick="document.getElementById('fu').click()" 
value="Click to select file" /> 
<span id="fileName"></span> 
</div> 

Et mettez les div visibles seulement sur votre fichier téléchargé nommé 'fu'

<input type="file" id="fu" onchange="FileSelected()" style="width: 0;"> 

et ajoutez ce script:

function FileSelected(e) 
{ 
    file = document.getElementById('fu').files[document.getElementById('fu').files.length - 1]; 
    document.getElementById('fileName').innerHtml= file.name; 
} 

Et vous avez encore des choses utiles comme file.type et file.size pour montrer.

Answer 3

Vous pouvez augmenter le width de .file > label { width: 113px; } et déposez ledans .file > input[type="file"].