Taille d'un INIPUT[type="file"] sous FireFox : Bug

Sous FireFox, les INPUT's file ne prennent pas en compte la propriété CSS Width. Bug 52500.

En réalité, tout se passe comme si votre INPUT avait réellement changé de taille (les autres éléments considèrent en tout cas qu'il n'occupe plus sa taille initiale mais la nouvelle taille CSS), mais le changement ne se fait pas sur lui : il reste avec sa taille par défaut !

Problème

Imaginons le cas suivant :

<input type="file" style="width: 50px" /><input type="submit" value="Envoyer !" />

Sous IE, pas de problème, votre input file fait bien 50pixels et le submit le suit : tout fonctionne.

Sous Opera, cela semble bon aussi.

Sous Safari, le comportement des inputs file est différent. Il n'y a pas de boite de texte, juste un boutton. Mais celui-ci a la taille souhaitée, même si cela parait bizarre vis à vis des autres navigateurs.

Sous FireFox.... le input file chevauche le input submit, qui se retrouve en dessous du bouton Parcourir !

Solution

Pas de solution CSS. Il faudra mettre un attribut SIZE sur votre input type="file" et ajuster.

En effet, celui-ci est géré par FireFox... Attention, il n'est pas calculé en pixel ou en pourcentage, mais bien en nombre de caractère que la boite de texte est sensée être capable d'afficher....

Faudra donc y aller par essais/erreurs...

Allez, bon dev à tous,

Fremy