Styliser un type d’entrée = bouton “fichier”

Comment styliser le type="file" entrée type="file" bouton type="file" .

La mise en forme des entrées de fichiers est notoirement difficile, car la plupart des navigateurs ne modifieront pas l’apparence de CSS ou de JavaScript.

Même la taille de l’entrée ne répondra pas aux goûts de:

  

Au lieu de cela, vous devrez utiliser l’atsortingbut size:

  

Pour tout style plus sophistiqué que celui-ci (par exemple, en modifiant l’apparence du bouton Parcourir), vous devrez examiner l’approche complexe consistant à superposer un bouton et une zone de saisie stylisés au-dessus de l’entrée du fichier natif. L’article déjà mentionné par rm sur http://www.quirksmode.org/dom/inputfile.html est le meilleur que j’ai vu.

Vous n’avez pas besoin de JavaScript pour cela! Voici une solution multi-navigateur:

Voir cet exemple! – Fonctionne dans Chrome / FF / IE – (IE10 / 9/8/7)

La meilleure approche serait d’avoir un élément d’étiquette personnalisé avec un atsortingbut for associé à un élément d’entrée de fichier caché . (L’atsortingbut de l’étiquette doit correspondre à l’ id l’élément de fichier pour que cela fonctionne).

   

En alternative, vous pouvez aussi envelopper l’élément de fichier directement avec une étiquette: (exemple)

  

En termes de style, masquez 1 l’élément en entrée à l’aide du sélecteur d’atsortingbut .

 input[type="file"] { display: none; } 

Il ne vous rest plus qu’à styler l’élément d’ label personnalisé. (exemple) .

 .custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; } 

1 – Il convient de noter que si vous masquez l’élément en utilisant display: none , cela ne fonctionnera pas dans IE8 et les versions ultérieures. Sachez également que jQuery validate ne valide pas les champs masqués par défaut. Si l’une de ces choses vous pose problème, voici deux méthodes différentes pour masquer l’entrée ( 1 , 2 ) qui fonctionne dans ces circonstances.

suivez ces étapes puis vous pouvez créer des styles personnalisés pour votre formulaire de téléchargement de fichier:

1.) Ceci est le simple formulaire html (veuillez lire les commentaires HTML que j’ai écrits ci-dessous)

 
Click to upload!

2.) puis utilisez ce script simple pour passer l’événement click au fichier tag d’entrée.

 function getFile(){ document.getElementById("upfile").click(); } 

vous pouvez maintenant utiliser n’importe quel type de style sans vous soucier de changer les styles par défaut. Je le sais très bien, car j’ai essayé de changer les styles par défaut pendant un mois et demi. croyez-moi, c’est très difficile parce que différents navigateurs ont une balise d’entrée de téléchargement différente. Donc, utilisez celui-ci pour construire vos formulaires de téléchargement de fichiers personnalisés. Voici le code AUTOMATED UPLOAD complet.

       
click to upload a file

prendre plaisir!

Bonne journée,

Cachez-le avec css et utilisez un bouton personnalisé avec $ (sélecteur) .cliquez sur () pour activer le bouton Parcourir. puis définissez un intervalle pour vérifier la valeur du type d’entrée de fichier. l’intervalle peut afficher la valeur pour l’utilisateur afin que l’utilisateur puisse voir ce qui se télécharge. l’intervalle sera effacé lorsque le formulaire est soumis [EDIT] Désolé, j’ai été très occupé était sensé mettre à jour ce post, voici un exemple

 

 $(window).load(function () { var intervalFunc = function () { $('#file-name').html($('#file-type').val()); }; $('#browse-click').on('click', function () { // use .live() for older versions of jQuery $('#file-type').click(); setInterval(intervalFunc, 1); return false; }); }); 

HTML

 
SelectPicture


CSS

 .new_Btn { // your css propterties } #html_btn { display:none; } 

jQuery

 $('.new_Btn').bind("click" , function () { $('#html_btn').click(); }); //edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery 

Violon : http://jsfiddle.net/M7BXC/

Vous pouvez également atteindre vos objectives sans jQuery avec JavaScript normal.

Maintenant le newBtn est lié au html_btn et vous pouvez styler votre nouveau btn comme vous le souhaitez: D

Tous les moteurs de rendu génèrent automatiquement un bouton lorsqu’un est créé. Historiquement, ce bouton était complètement dénué de style. Cependant, Trident et WebKit ont ajouté des hooks aux pseudo-éléments.

Trident

À partir d’IE10, le bouton d’entrée de fichier peut être stylé à l’aide du pseudo-élément ::-ms-browse . Fondamentalement, toutes les règles CSS que vous appliquez à un bouton normal peuvent être appliquées au pseudo-élément. Par exemple:

 ::-ms-browse { background: black; color: red; padding: 1em; } 
  
   

Vous pouvez envelopper votre entrée type = “fichier” à l’intérieur d’une étiquette pour l’entrée. Coiffez l’étiquette comme vous le souhaitez et masquez l’entrée avec display: none;

Si vous utilisez Bootstrap 3, cela a fonctionné pour moi:

Voir http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } 
   Browse...  

Je suis capable de le faire avec du CSS pur en utilisant le code ci-dessous. J’ai utilisé bootstrap et font-awesome.

    

C’est simple avec jquery. Pour donner un exemple de code de la suggestion de Ryan avec une légère modification.

HTML de base:

 

Veillez à définir le style sur l’entrée lorsque vous êtes prêt: opacity: 0 Vous ne pouvez pas définir l’ display: none car il doit être cliquable. Mais vous pouvez le placer sous le “nouveau” bouton ou rentrer sous quelque chose d’autre avec z-index si vous préférez.

Installez un peu de jquery pour cliquer sur l’entrée réelle lorsque vous cliquez sur l’image.

 $('#image_icon').click(function() { $('#the_real_file_input').click(); }); 

Maintenant, votre bouton fonctionne. Il suffit de couper et coller la valeur lorsqu’elle est modifiée.

 $('input[type=file]').bind('change', function() { var str = ""; str = $(this).val(); $("#filename").text(str); }).change(); 

Tah dah! Vous devrez peut-être parsingr le val () à quelque chose de plus significatif, mais vous devriez être tous définis.

TLDR; Exemple de travail ici avec le support natif de glisser-déposer: https://jsfiddle.net/ms3bbazv/4/

Lors du stylage d’une entrée de fichier, vous ne devez rompre aucune interaction native fournie par l’entrée.

L’ display: none approche rompt la prise en charge native du glisser-déposer.

Pour ne rien casser, vous devez utiliser l’approche opacity: 0 pour l’entrée et la positionner à l’aide du modèle relatif / absolu dans un wrapper.

En utilisant cette technique, vous pouvez facilement définir une zone de clic / drop pour l’utilisateur et append une classe personnalisée en JavaScript sur l’évènement dragenter pour mettre à jour les styles et donner à l’utilisateur un feedback pour lui permettre de déposer un fichier.

HTML:

  

CSS:

 input[type="file"] { position: absolute; left: 0; opacity: 0; top: 0; bottom: 0; width: 100%; } div { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: center; background: #ccc; border: 3px dotted #bebebe; border-radius: 10px; } label { display: inline-block; position: relative; height: 100px; width: 400px; } 

Voici un exemple de travail (avec JS supplémentaire pour gérer les événements de dragover et les fichiers supprimés).

https://jsfiddle.net/ms3bbazv/4/

J’espère que cela a aidé!

VISIBILITÉ: caché TRICK

Je vais habituellement pour la visibility:hidden astuce visibility:hidden

c’est mon bouton stylé

 
Upload

c’est le bouton type d’entrée = fichier. Notez la visibility:hidden règle visibility:hidden

  

C’est le bit JavaScript pour les coller ensemble. Ça marche

  

la seule façon dont je peux penser est de trouver le bouton avec JavaScript après qu’il soit rendu et lui assigner un style

vous pourriez aussi regarder cet écrit

  

J’utiliserais normalement le javascript simple pour personnaliser la balise de saisie du fichier. Un champ de saisie masqué, sur un bouton, javascript appelle le champ caché, une solution simple sans css ou tas de jquery.

  

Voici une solution qui ne colore pas vraiment l’élément mais utilise un élément par-dessus les autres éléments (qui peuvent être stylés). L’élément n’est pas vraiment visible, l’illusion générale est un contrôle de téléchargement de fichier bien stylé.

Je suis tombé sur ce problème récemment et malgré la pléthore de réponses sur Stack Overflow, aucune ne semblait vraiment correspondre à la facture. Au final, j’ai fini par personnaliser cela pour avoir une solution simple et élégante.

Je l’ai également testé sur Firefox, IE (11, 10 et 9), Chrome et Opera, iPad et quelques appareils Android.

Voici le lien JSFiddle -> http://jsfiddle.net/umhva747/

 $('input[type=file]').change(function(e) { $in = $(this); $in.next().html($in.val()); }); $('.uploadButton').click(function() { var fileName = $("#fileUpload").val(); if (fileName) { alert(fileName + " can be uploaded."); } else { alert("Please select a file to upload"); } }); 
 body { background-color:Black; } div.upload { background-color:#fff; border: 1px solid #ddd; border-radius:5px; display:inline-block; height: 30px; padding:3px 40px 3px 3px; position:relative; width: auto; } div.upload:hover { opacity:0.95; } div.upload input[type="file"] { display: input-block; width: 100%; height: 30px; opacity: 0; cursor:pointer; position:absolute; left:0; } .uploadButton { background-color: #425F9C; border: none; border-radius: 3px; color: #FFF; cursor:pointer; display: inline-block; height: 30px; margin-right:15px; width: auto; padding:0 20px; box-sizing: content-box; } .fileName { font-family: Arial; font-size:14px; } .upload + .uploadButton { height:38px; } 
  
Select file..

Voici une solution qui montre également le nom du fichier choisi: http://jsfiddle.net/raft9pg0/1/

HTML:

   File: - 

JS:

 $(function() { $("input:file[id=file-upload]").change(function() { $("#file-upload-value").html( $(this).val() ); }); }); 

CSS:

 input[type="file"] { display: none; } .custom-file-upload { background: #ddd; border: 1px solid #aaa; border-top: 1px solid #ccc; border-left: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #444; display: inline-block; font-size: 11px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(255, 255, 255, .75); cursor: pointer; margin-bottom: 20px; line-height: normal; padding: 8px 10px; } 

Cette semaine, je devais aussi personnaliser le bouton et afficher le nom du fichier sélectionné à part, donc après avoir lu certaines des réponses ci-dessus (merci BTW), j’ai eu l’implémentation suivante:

HTML:

 
{{fileName}}

CSS

  input[type='file'] { color: #a1bbd5; display: none; } .custom-file-upload { border: 1px solid #a1bbd5; display: inline-block; padding: 2px 8px; cursor: pointer; } label{ color: #a1bbd5; border-radius: 3px; } 

Javascript (angular)

 app.controller('MainCtrl', function($scope) { $scope.fileName = 'No file chosen'; $scope.onFileSelect = function ($files) { $scope.selectedFile = $files; $scope.fileName = $files[0].name; }; }); 

Fondamentalement, je travaille avec lib-fichier-upload lib, angular-à valeur, je lie le nom de fichier à mon $ scope et lui donne la valeur initiale de «aucun fichier choisi», je lie également la fonction onFileSelect () à ma scope alors quand un fichier est sélectionné, j’obtiens le nom de fichier en utilisant ng-upload API et l’atsortingbuer au $ scope.filename.

Peut-être beaucoup de critiques. Mais j’aime ça en CSS pur avec des boutons fa:

 .divs { position: relative; display: inline-block; background-color: #fcc; } .inputs { position:absolute; left: 0px; height: 100%; width: 100%; opacity: 0; background: #00f; z-index:999; } .icons { position:relative; } 
 



C’est un bon moyen de le faire avec le téléchargement de fichiers matériels / angulars. Vous pouvez faire la même chose avec un bouton bootstrap.

Remarque J’ai utilisé au lieu de ce qui permet aux événements de clic de s’améliorer.

  

Ici, nous utilisons un span pour déclencher la saisie d’un fichier de type et nous avons simplement personnalisé cette plage afin que nous puissions append n’importe quel style en utilisant cette méthode.

Notez que nous utilisons une balise d’entrée avec l’option visibility: hidden et la déclenchons dans la plage.

 .attachFileSpan{ color:#2b6dad; cursor:pointer; } .attachFileSpan:hover{ text-decoration: underline; } 
 

Customized input of type file

Attach file

css peut faire beaucoup ici … avec une petite ruse …

 
#wrapper { width: 93px; /*play with this value */ height: 28px; /*play with this value */ background: url('browseBtn.png') 0 0 no-repeat; border:none; overflow:hidden; } #browse{ margin-left:-145px; /*play with this value */ opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); }

:: reference :: http://site-o-matic.net/?viewpost=19

-une abbaye

J’ai trouvé une méthode très simple pour passer le bouton de fichier à une image. Il vous suffit d’étiqueter une image et de la placer sur le bouton du fichier.

  

En cliquant sur l’image étiquetée, vous sélectionnez le bouton de fichier.

UNIQUEMENT CSS

Utilisez ce très simple et facile

Html:

   

Css:

 .choose::-webkit-file-upload-button { color: white; display: inline-block; background: #1CB6E0; border: none; padding: 7px 15px; font-weight: 700; border-radius: 3px; white-space: nowrap; cursor: pointer; font-size: 10pt; } 

Ne vous laissez pas berner par les «excellentes» solutions uniquement en CSS, spécifiques au navigateur, ou qui superposent le bouton stylé au-dessus du bouton réel, ou qui vous obligent à utiliser un au lieu d’un , ou tout autre piratage de ce type. JavaScript est nécessaire pour le faire fonctionner pour une utilisation générale. Veuillez étudier comment gmail et DropZone le font si vous ne me croyez pas.

Choisissez simplement un bouton normal comme vous le souhaitez, puis appelez une simple fonction JS pour créer et lier un élément d’entrée masqué à votre bouton stylé.

      

Remarquez comment le code ci-dessus le lie à nouveau à chaque fois que l’utilisateur choisit un fichier. Ceci est important car “onchange” est uniquement appelé si l’utilisateur modifie le nom du fichier. Mais vous voulez probablement obtenir le fichier chaque fois que l’utilisateur le fournit.

Voici une solution simple css uniquement, qui crée une zone cible cohérente et vous permet de personnaliser vos faux éléments comme vous le souhaitez.

L’idée de base est la suivante:

  1. Avoir deux “faux” éléments (une entrée de texte / lien) en tant que frères et soeurs à votre entrée de fichier réel. Absolument les positionner pour qu’ils soient exactement au-dessus de votre zone cible.
  2. Enveloppez votre entrée de fichier avec un div. Définissez le débordement sur caché (afin que le fichier ne déborde pas) et définissez exactement la taille souhaitée pour votre zone cible.
  3. Définissez l’opacité sur 0 sur l’entrée du fichier afin qu’elle soit cachée mais toujours cliquable. Donnez-lui une grande taille de police afin que vous puissiez cliquer sur toutes les parties de la zone cible.

Voici le jsfiddle: http://jsfiddle.net/gwwar/nFLKU/

 
Browse

Une solution vraiment intelligente utilisant jQuery qui fonctionne dans tous les anciens navigateurs ainsi que dans les nouveaux, que j’ai trouvé ici . Il prend en charge tous les problèmes de style et de clic () en utilisant le bouton de navigation du fichier. J’ai fait une version javascript simple: fiddle La solution est aussi simple que géniale: rendre l’input de fichier invisible et utiliser un morceau de code pour le placer sous le curseur de souris.

 
browse
function file_ho(e, o, a) { e = window.event || e; var x = 0, y = 0; if (o.offsetParent) { do { x += o.offsetLeft; y += o.offsetTop; } while (o = o.offsetParent); } var x1 = e.clientX || window.event.clientX; var y1 = e.clientY || window.event.clientY; var le = 100 - (x1 - x); var to = 10 - (y1 - y); document.getElementById('file_' + a).style.marginRight = le + 'px'; document.getElementById('file_' + a).style.marginTop = -to + 'px'; } .inp_field_12 { position:relative; overflow:hidden; float: left; width: 130px; height: 30px; background: orange; } .inp_field_12 span { position: absolute; width: 130px; font-family:'Calibri', 'Trebuchet MS', sans-serif; font-size:17px; line-height:27px; text-align:center; color:#555; } .inp_field_12 input[type='file'] { cursor:pointer; cursor:hand; position: absolute; top: 0px; right: 0px; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; outline: none; outline-style:none; outline-width:0; ie-dummy: expression(this.hideFocus=true); } .inp_field_12:hover { background-position:-140px -35px; } .inp_field_12:hover span { color:#fff; }

Si vous cherchez une bibliothèque javascript – une solution prête à l’emploi , jquery-fileinput fonctionne correctement .

Mettre à jour Nevermind, cela ne fonctionne pas dans IE ou son nouveau frère, FF. Works on every other type of element as expected, but doesn’t work on file inputs. A much better way to do this is to just create a file input and a label that links to it. Make the file input display none and boom, it works in IE9+ seamlessly.

Warning: Everything below this is crap!

By using pseudo elements positioned/sized against their container, we can get by with only one input file (no additional markup needed), and style as per usual.

Démo

  .foo { display: block; position: relative; width: 300px; margin: auto; cursor: pointer; border: 0; height: 60px; border-radius: 5px; outline: 0; } .foo:hover:after { background: #5978f8; } .foo:after { transition: 200ms all ease; border-bottom: 3px solid rgba(0,0,0,.2); background: #3c5ff4; text-shadow: 0 2px 0 rgba(0,0,0,.2); color: #fff; font-size: 20px; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; content: 'Upload Something'; line-height: 60px; border-radius: 5px; } 

Enjoy guys!

Old Update

Turned this into a Stylus mixin. Should be easy enough for one of you cool SCSS cats to convert it.

 file-button(button_width = 150px) display block position relative margin auto cursor pointer border 0 height 0 width 0 outline none &:after position absolute top 0 text-align center display block width button_width left -(button_width / 2) 

Usage:

  input[type="file"] file-button(200px) 

As JGuo and CorySimmons mentioned, you can use the clickable behaviour of a stylable label, hiding the less flexible file input element.

    Custom file input      

These answers are nice, and they all work for very specific use cases. That is to say, they are opinionated.

So, here’s an answer that assumes nothing, but will work no matter how you modify it. You can change design with css, add javascript to maybe show a file name on change, etc. it will still always work.

Code:

Here is the core css

 .file-input{ pointer-events: none; position: relative; overflow: hidden; } .file-input > * { pointer-events: none; } .file-input > input[type="file"]{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: all; cursor: pointer; height: 100%; width: 100%; } 

and the core html:

 

As you can see, we are forcing any pointer event(click) that happens on the .file-input element, or any of its children, to be proxied to the file input. This is because the file input is positioned absolute and will consume the width/height of the container always. You can therefore customize to fit your need. style the wrapper into a button, use some js to display file name on select, etc. nothing will break so long as the above core code remains intact.

As you will see in the demo, i have added a span with text “Select file” and a class with extra styles to style the .file-input div. This should be the canonical starting point for anyone intending to create a custom file upload element.

Demo: JSFIDDLE