Comment créer un champ de saisie de formulaire de type file pour Safari, Chrome et d'autres navigateurs WebKit?Style de fichier d'entrée Safari avec CSS?
À l'heure actuelle, tout ce que je reçois est le bouton Choisir le fichier affiché au-dessus de la zone de saisie de texte habituelle.
J'ai regardé un peu sur Google, mais je n'ai pas vraiment vu quelque chose d'utile.
Je ne crois pas que vous le pouvez. Apple a récemment décidé d'activer le style de leurs contrôles de formulaire. Ils croient qu'il est plus difficile de trouver des boutons et des entrées quand ils ne ressemblent pas à des boutons - donc ils ne vous laisseront peut-être pas encore styler leurs entrées de téléchargement de fichiers.
Je suis environ 90% sûr que vous ne pouvez pas le faire.
En fait, je ne me dérange pas le bouton Apple lui-même. Je veux juste empêcher la boîte d'apparaître sous le bouton. –
Avoir un Uploader Flash peut donner encore plus de douleur:
Il ne fonctionne que dans IE dans la même session que votre navigateur et dans tous les autres navigateurs, il fait une nouvelle session, donc vous expulser de votre dos fin de l'application sécurisée. La seule solution à cela est également d'envoyer vos données de session au Flash ... et voilà!
J'ai atterri sur cette page à la recherche de moyens pour styliser l'élément d'entrée de fichier pour Safari ... J'en ai beaucoup dans une cellule de 150px seulement, mais ces entrées le forcent à être plus grand.
J'ai trouvé une seule solution jusqu'à présent, et c'est de les laisser flotter au-dessus du reste en utilisant style="position:absolute;z-index:2" alors que mon TD a le style position:relative.
C'est une mauvaise mauvaise solution, je sais!
Firefox 4 vous permettra des éléments d'entrée de style (dans une manière détournée): link
Espérons que les autres navigateurs seront prises sur à quel point la douleur énorme cela enlève.
Si vous êtes uniquement intéressé par les navigateurs Webkit, vous pouvez utiliser leurs pseudo-sélecteurs intégrés pour cibler différentes parties de l'élément d'entrée de fichier. input::-webkit-file-upload-button {...}, par exemple.
Il y a quelques jours, j'ai eu la tâche de styliser un input="file" avec du CSS (principalement du CSS3 avec des effets supplémentaires) et il est possible de le faire.
J'ai écrit (ou fait de petites réécritures à filestyle plugin) un plugin jQuery. Son comportement de base est le même avec les images mais j'ai totalement remplacé les images par span s et div s. Le plugin cache input="file" puis construit un wrapper avec CSS et déclenche enfin des actions de clic sur une entrée cachée.
J'espère que ce sera utile pour tout le monde.
Here's an example of how to style input="file" with only CSS.
Tous les moteurs de rendu génère automatiquement un bouton lorsqu'une est créé. Historiquement, ce bouton a été complètement dénué de style. Cependant, récemment Trident et WebKit ont ajouté des crochets à travers des pseudo-éléments.
Trident
À partir de l'IE10 sur le bouton d'entrée de fichier peuvent être coiffés à l'aide du pseudo-élément ::-ms-browse. Fondamentalement, toutes les règles CSS que vous appliquez un bouton ordinaire peuvent être appliquées au pseudo-élément. Par exemple:
<input type="file">
::-ms-browse {
background: black;
color: red;
padding: 1em;
}
Cette affiche comme suit dans IE10 sur Windows 8:
WebKit
WebKit fournit un crochet pour le bouton d'entrée de fichier avec le ::-webkit-file-upload-button pseudo- élément. Encore une fois à peu près toute règle CSS peut être appliqué, par conséquent l'exemple Trident fonctionnera ici aussi:
<input type="file">
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}
Cette affiche comme suit dans Chrome 26 sur Mac OS X:
source: http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/ – Anselm
J'ai fait trouvé ce qui fonctionne. J'avais une autre règle css héritée interagir avec mon nouveau formulaire qui a déclenché une boîte à afficher autour de l'entrée. Merci pour vos réponses rapides cependant, il m'a indiqué dans la bonne direction. À la votre! –
Pourriez-vous poster ce que votre ancienne règle css qui a brisé le style était afin que les autres puissent l'éviter? –