Définition d'une largeur uniforme de <input type = "file"> dans tous les navigateurs
Quelle combinaison de CSS ou d'attributs est nécessaire?
- Masquer le contrôle réel
- Faites une DIV avec les commandes et le style que vous souhaitez en plus
Le bouton n'est pas un contrôle HTML standard.
quel est le problème avec
<input type="file" size="50" .... />
? Sera identique sauf safari sur mac je suppose (sur mac, tous les contrôles de téléchargement sont différents, sur tous les navigateurs)
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 réel, n'oubliez pas qu'il est très important de définir l'opacité du contrôle à zéro et de ne pas utiliser réellement visibility: hidden. Faire cela masquera réellement l'élément, désactivant l'action de clic.
De plus, si vous couvrez 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 une main quand il est sur le texte- partie d'entrée du contrôle de fichier (il sera toujours par défaut à l'entrée ou au pointeur normal non lié). 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 que leur apparence ou leur personnalisation soient parfaites. (en particulier en ce qui concerne le comportement du curseur, car je considère qu'il s'agit d'une rupture d'interface utilisateur). À la fin de la journée, je pense qu'il est juste plus facile d'accepter que différents navigateurs rendront le contrôle différemment, et c'est exactement comme ça.