37
Quelle combinaison de CSS ou d'attributs est nécessaire?Définition d'une largeur <input type = "file"> uniforme dans tous les navigateurs
A
Répondre
31
- Masquer le contrôle effectif
- Fait un DIV avec les commandes et le style que vous voulez sur le dessus de celui-ci
Le bouton n'est pas un contrôle standard HTML.
22
ce qui ne va pas avec
<input type="file" size="50" .... />
? fera-t-mêmes, sauf safari sur mac je suppose (sur mac, tous les contrôles de téléchargement est différent, sur tous les navigateurs)
+1
input-width ne fait rien. Vous pensez peut-être à la taille d'entrée, qui change la largeur, mais pas aux unités que vous pouvez normaliser d'un navigateur à l'autre. – bobince
+0
oui, vous avez raison, je n'étais pas attentif :) –
+1
Cela fonctionne ... il gère firefox..pendant la largeur CSS propery gère Chrome, IE, et Safari –
7
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 êtes masquer le contrôle réel, rappelez-vous qu'il est très important de mettre l'opacité du contrôle à zéro, et ne pas utiliser réellement visibility: hidden. Faire cela cachera réellement l'élément, en désactivant l'action de clic. En outre, si vous masquez 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 quand il est au-dessus de la partie d'entrée de texte du contrôle de fichier (il sera toujours par défaut à l'entrée ou le pointeur de non-lien régulier). 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. (en particulier concernant le comportement du curseur, car je considère qu'un disjoncteur d'interface utilisateur). À la fin de la journée, je pense qu'il est plus facile d'accepter que les différents navigateurs rendent le contrôle différemment, et c'est comme ça.
Questions connexes
- 1. modèle de boîte entre Incohérence <input type = "submit" /> et <input type = "text" />
- 2. CSS Selector pour <input type = "?"
- 3. Comment styler <input type = "text"> dans IE6 CSS?
- 4. Quand était <input type = search> introduit dans Safari
- 5. Problème avec <input type = 'text' /> et <textarea> width
- 6. Object.watch() pour tous les navigateurs?
- 7. <select> largeur dans IE ne se comporte pas comme dans les autres navigateurs
- 8. <input type = "mot de passe" ...> style avec jQuery
- 9. <input type = « file » /> ne montrant chemin
- 10. Rotation d'une image dans tous les navigateurs (canvas dans IE?)
- 11. Quelle est la différence entre <input type = "button" /> et <button>?
- 12. Impression du même contenu dans tous les navigateurs
- 13. JavaScript et jQuery problème de défilement dans tous les navigateurs
- 14. Comment générer un événement clic-droit dans tous les navigateurs
- 15. fichier: // lien ne rien faire dans tous les navigateurs
- 16. Comment puis-je obtenir la fonctionnalité de `<input type =" fichier "de HTML dans Swing?
- 17. tabindex et <input type = "file" /> différent dans Firefox et IE
- 18. Comment convertir input type = Texte à Span
- 19. Les éléments INPUT et SELECT taille personnalisée
- 20. Le type <type> existe dans les deux DLL
- 21. réglage innerHTML pour tous les navigateurs en javascript
- 22. jQuery désactiver les options SELECT basées sur Radio sélectionné (besoin de soutien pour tous les navigateurs)
- 23. Ce code ne fonctionne pas (il s'agit de <input type = "file" />)
- 24. jQuery: obtenir le nom de fichier sélectionné de <input type = "file" />
- 25. Comment faire une valeur de <input type = "text"> sélectionné avec jQuery?
- 26. Compatibilité entre les navigateurs dans ASPNET
- 27. Remplacer tous les <br> avec <br />
- 28. Est-ce que tous les moteurs de navigateur traitent "\ <" comme "<" and "\>" comme ">"?
- 29. Problème jQuery avec firefox, n'est-il pas compatible avec tous les navigateurs?
- 30. Comment créer un effet désactivé sur les tags <input>, <select> et <img> avec jQuery?
donc il n'y a aucun moyen d'y parvenir en utilisant le contrôle natif lui-même? – Larsenal
J'ai mis à jour la réponse. Voir: http://www.quirksmode.org/dom/inputfile.html –
Il n'y a absolument pas besoin d'utiliser l'opacité - vous pouvez simplement déléguer le clic sur un affichage: aucun élément - beaucoup plus simple et vous n'avez pas à prendre la taille d'entrée (variable) en compte. –