Définition d'une largeur uniforme de <input type="file"> dans tous les navigateurs

Question

Quelle combinaison de CSS ou d'attributs est nécessaire ?

Answer 1

• Cacher le contrôle actuel
• Création d'un DIV avec les contrôles et le style que vous souhaitez par-dessus.

Le bouton n'est pas un contrôle HTML standard.

Voir : http://www.quirksmode.org/dom/inputfile.html

Answer 2

Quel est le problème avec

<input type="file" size="50" .... />

? L'aspect sera le même sauf pour Safari sur Mac (sur Mac, tous les contrôles de téléchargement sont différents, sur tous les navigateurs).

Answer 3

En plus du tutoriel quirksmode, voici une autre bonne ressource : http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Si vous masquez le contrôle proprement dit, n'oubliez pas qu'il est très important de définir l'opacité du contrôle à zéro, et de ne pas utiliser l'option visibility: hidden . Cette opération a pour effet de masquer l'élément et de désactiver l'action du clic.

De plus, si vous recouvrez le contrôle avec un bouton graphique, sachez que dans certains navigateurs (Firefox et IE, je crois), vous ne pourrez pas changer le type de curseur en main lorsqu'il se trouve sur la partie entrée de texte du contrôle de fichier (il sera toujours par défaut sur l'entrée ou le pointeur normal sans lien). Et oui, j'ai essayé d'utiliser cursor: pointer (et cursor: hand ).

Personnellement, j'ai eu du mal avec les boîtes de téléchargement personnalisées, et il n'y a pas de solution miracle pour obtenir une apparence ou une personnalisation parfaite. (notamment en ce qui concerne le comportement du curseur, car je considère qu'il s'agit d'un problème d'interface utilisateur). En fin de compte, je pense qu'il est plus facile d'accepter que les différents navigateurs rendent le contrôle différemment, et que c'est ainsi.