HTML5: Comment spécifier la largeur d'une entrée de fichier ?

Question

Le validateur W3C dit : "L'attribut size n'est pas autorisé sur l'élément input à ce niveau."

Quelle est la bonne manière de spécifier la largeur d'un champ de fichier en HTML5 ?

Answer 1

Dans le champ d'entrée, utilisez l'attribut style, cela vous permet d'utiliser du css.

Ou avec du css séparé :

input[name="foo"] {
  width: 40px;
}

Answer 2

Dans votre fichier css, spécifiez la largeur comme suit :

input[type=file] { width: 300px; border: 2px solid red; }

http://jsfiddle.net/VbTAV/

Answer 3

Comme recommandé dans les autres réponses, la largeur de l'ensemble du champ de fichier, c'est-à-dire du bouton et du texte du nom de fichier, peut être définie en CSS comme suit :

input[type="file"] {
  /* fonctionnel */
  width: 100%;
  /* cosmétique */
  background-color: steelblue;
}

(Cela fonctionne également dans Firefox de nos jours.)

Cependant, cela ne change pas la largeur du bouton de sélection de fichier. Cela peut causer des problèmes tels que le rognage, comme illustré dans le snippet suivant.

input[type="file"] {
  width: 40px;      
}

Pour modifier la largeur du bouton de sélection de fichier (et/ou d'autres styles de bouton), vous pouvez utiliser le pseudo-élément ::file-selector-button. Par exemple :

input[type="file"] {
  width: 40px;
}

input:last-of-type::file-selector-button {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* cosmétique */

body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

Answer 4

Vous devez mettre l''input'' à l'intérieur d'une div :

Answer 5

$(function(){
    var fileInput = $('.upload-file');
    var maxSize = fileInput.data('max-size');
    $('.upload-form').submit(function(e){
        if(fileInput.get(0).files.length){
            var fileSize = fileInput.get(0).files[0].size; // en octets
            if(fileSize>maxSize){
                alert('taille du fichier est plus de' + maxSize + ' octets');
                return false;
            }else{
                alert('taille du fichier est correcte - '+fileSize+' octets');
            }
        }else{
            alert('choisir un fichier, s'il vous plaît');
            return false;
        }
    });
});

http://jsfiddle.net/9bhcB/2/