{"id":4161,"date":"2014-10-06T08:45:20","date_gmt":"2014-10-06T06:45:20","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=4161"},"modified":"2023-10-03T15:54:01","modified_gmt":"2023-10-03T13:54:01","slug":"input-file-personnalise-css-js","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/input-file-personnalise-css-js","title":{"rendered":"Un input:file personnalis\u00e9 en CSS et JS"},"content":{"rendered":"

Il y a quelques temps de cela, lorsque je faisais des recherches sur les boutons radios et checkboxes personnalisables en CSS<\/a>, j’avais en t\u00eate de faire la m\u00eame chose avec le champ \u00ab\u00a0fichier\u00a0\u00bb (input-file<\/code>). J’avais donc fait un essai en CSS pur<\/a>. Puis j’avais laiss\u00e9 l’id\u00e9e de c\u00f4t\u00e9.<\/p>\n

Finalement je suis revenu dessus hier pour compl\u00e9ter l’id\u00e9e de base par une information visuelle textuelle. En effet si vous essayez cette version de l’input-file personnalis\u00e9 en CSS<\/a>, vous verrez que rien ne vous indique qu’une image est s\u00e9lectionn\u00e9e par vos soins. Ce qui est plut\u00f4t g\u00eanant pour un utilisateur.<\/p>\n

J’ai alors cherch\u00e9 \u00e0 le faire en JS (vanilla, pas de jQuery), et ce n’est pas si complexe que cela.<\/p>\n

D\u00e9monstration<\/a><\/p>\n

Le code HTML<\/h2>\n

Pour rendre la chose la plus \u00ab\u00a0naturelle\u00a0\u00bb possible, nous allons nous contenter d’un \u00e9l\u00e9ment label<\/code> et d’un input:file<\/code>.
\nLe label sera utilis\u00e9 comme \u00e9l\u00e9ment \u00ab\u00a0sensible\u00a0\u00bb, comme un bouton, pour activer le champ de s\u00e9lection d’un fichier.<\/p>\n

<div class="input-file-container">\t<input class="input-file" id="my-file" type="file">\t<label for="my-file" class="input-file-trigger">\t\tSelect a file...\t<\/label><\/div><p class="file-return" aria-live="polite" aria-atomic="true"><\/p><\/code><\/pre> 
 <\/div> <\/div>\n
Je renseigne ici volontairement plusieurs classes pour manipuler les \u00e9l\u00e9ments en CSS et JS sans d\u00e9pendre des \u00e9l\u00e9ments HTML. Le paragraphe en fin de code permettra d’accueillir un peu d’informations sur le fichier.<\/p>\n
Quelques styles<\/h2>\n
Le conteneur va \u00eatre positionn\u00e9 en relative<\/code> afin de pouvoir placer l’input en position absolue.
\nOn va donc se retrouver avec le label du champ servant de \u00ab\u00a0d\u00e9clencheur\u00a0\u00bb (sensible au clic et touches du clavier) et le champ de recherche de fichiers par dessus mais transparent, servant lui aussi de d\u00e9clencheur.
\nNous allons faire en sorte de travailler la marge interne (padding) de ce champ afin de le superposer au label, rendant ainsi sensibles le label et le champ invisible sur une surface \u00e0 peu pr\u00e8s identique.<\/p>\n
 
\/* styles de base si JS est activ\u00e9 *\/.js .input-file-container {\tposition: relative;\twidth: 225px;}.js .input-file-trigger {\tdisplay: block;\tpadding: 14px 45px;\tbackground: #39D2B4;\tcolor: #fff;\tfont-size: 1em;\ttransition: all .4s;\tcursor: pointer;}.js .input-file {\tposition: absolute;\ttop: 0;\tleft: 0;\twidth: 225px;\tpadding: 14px 0;\topacity: 0;\tcursor: pointer;}\/* quelques styles d'interactions *\/.js .input-file:hover + .input-file-trigger,.js .input-file:focus + .input-file-trigger,.js .input-file-trigger:hover {\tbackground: #34495E;\tcolor: #39D2B4;}\/* styles du retour visuel *\/.file-return {\tmargin: 0;}.file-return:not(:empty) {\tmargin: 1em 0;}.js .file-return {\tfont-style: italic;\tfont-size: .9em;\tfont-weight: bold;}\/* on compl\u00e8te l'information d'un contenu textuel uniquement lorsque le paragraphe n'est pas vide *\/.js .file-return:not(:empty):before {\tcontent: "Selected file: ";\tfont-style: normal;\tfont-weight: normal;}<\/code><\/pre> 
 <\/div> <\/div>\n
Pour le reste des choix graphiques (couleurs, typographie, etc) je vous laisse faire, c’est secondaire pour ce que je vous propose.<\/p>\n
Retour visuel textuel gr\u00e2ce \u00e0 JavaScript<\/h2>\n
Ce code est propos\u00e9 en JS vanilla (c’est \u00e0 dire sans Framework JS), il est possible de l’adapter \u00e0 votre framework pr\u00e9f\u00e9r\u00e9 si vous en utilisez un dans votre projet.<\/p>\n
 
\/\/ ajout de la classe JS \u00e0 HTMLdocument.querySelector("html").classList.add('js');\/\/ initialisation des variablesconst fileInput = document.querySelector( ".input-file" );const button = document.querySelector( ".input-file-trigger" );const the_return = document.querySelector(".file-return");\/\/ action lorsque la "barre d'espace" ou "Entr\u00e9e" est press\u00e9ebutton.addEventListener( "keydown", function( event ) {\tif ( event.keyCode == 13 || event.keyCode == 32 ) {\t\tfileInput.focus();\t}});\/\/ action lorsque le label est cliqu\u00e9button.addEventListener( "click", function( event ) {\tfileInput.focus();\treturn false;});\/\/ affiche un retour visuel d\u00e8s que input:file changefileInput.addEventListener( "change", function( event ) {\tthe_return.innerHTML = this.value;});<\/code><\/pre> 
 <\/div> <\/div>\n
Les actions sont relativement simples ici, j’esp\u00e8re que les commentaires vous suffiront \ud83d\ude42<\/p>\n
Le r\u00e9sultat et la pr\u00e9sentation ici sont tr\u00e8s sommaires, il vous appartiendra ensuite de ruser pour ajouter des petits effets visuels : une ic\u00f4ne de fichier joint sur le bouton par exemple, ou une personnalisation du retour textuel suivant la langue, etc.<\/p>\n
D\u00e9monstration<\/a> Fork on CodePen.io<\/a><\/p>\n
Quelques articles pour aller plus loin<\/h2>\n
Si vous ne le saviez pas, vous pouvez \u00e9galement styler certains \u00e9l\u00e9ments de formulaire comme les boutons radio, les checkbox, ou m\u00eame l’\u00e9l\u00e9ment progress en HTML5.<\/p>\n