Come cambiare “input file” (Scegli file…) con JS e CSS

Quante volte ti sei trovato davanti il pulsante HTML di input di tipo “file”, con la scritta “Scegli file…”, e non trovavi nessun modo per cambiare la sua estetica con le comuni regole CSS?


Questa tipologia di elemento, in una pagina HTML, è uno di quelli che trova difficile integrazione con il resto della pagina. Quando crei un tema o progetti lo stile di una pagina con CSS, input type=”file” sarà il tuo peggior nemico, difficile da gestire e da modificare sotto tutti i punti di vista (in ambito prettamente estetico).

Esistono alcune tecniche con le regole di stile CSS per adeguarlo al resto degli elementi, ma a mio parere non sempre si riesce ad ottenere un buon risultato.

Per nostra esperienza, quando si ha a che fare con “input file“, detto anche “pulsante Sfoglia“, è meglio agire in maniera differente, come vedremo qui di seguito.

Detto brevemente, invece di cambiare lo stile di questo elemento, la cosa più conveniente è nasconderlo e sostituirlo con un comune pulsante <button>, che eseguirà il medesimo compito.

A prima vista, questo sistema può sembrare complicato ad un occhio inesperto, ma in realtà richiede meno e una quantità di codice inferiore piuttosto che modificare direttamente il CSS del pulsante “Sfoglia” o “Scegli file“.

Cambiare “input file” con elemento “button” con JS e CSS

Prima di iniziare la spiegazione del codice, vorrei mostrarti il risultato finale qui in basso, per testare tu stesso il funzionamento di questa tecnica:



N.B. Con la nostra guida, il pulsante “[Scegli file…] Nessun file selezionatoNON verrà mostrato.

Come puoi ben vedere, entrambi i pulsanti eseguono la ricerca di file all’interno del tuo dispositivo. Ma non farti ingannare, l’elemento “button” HTML (quello verde) servirà a sostituire l’elemento “input” graficamente, ma non sostituirà la sua funzione, poiché con JavaScript il click sul pulsante verde “reindirizzerà” la richiesta al “tasto sfoglia” reale.

(è più facile mostrarlo che spiegarlo).

Il codice

Senza troppi giri di parole, qui il codice HTML:

<input type="file" id="myfile" style="display:none;">
<button onclick="document.getElementById('myfile').click()">Scegli qui</button>

Ora esaminando il codice HTML, possiamo capire che il click sul <button> equivale al click su <input type=”file”>. Questo grazie all’evento “onclick” JavaScript e a getElementById().click().

Con questa sostituzione, gli utenti non visualizzeranno più il classico pulsante “Scegli file…“, che verrà nascosto con la regola CSS display:none, ma un pulsante creato ad hoc per l’occasione (con tanto di stile CSS), che si integrerà maggiormente con il resto della pagina.

Per funzionare il pulsante dovrà simulare l’evento “click” sull’elemento input, per questo motivo scriveremo una breve funzione con JavaScript accompagnata dall’evento “onclick“.

Questa semplice funzione potrà portare enormi benefici al vostro tema e allo stile del sito, senza scendere a compromessi come spesso accade sull’elemento input file in HTML. Inoltre ci permette di nascondere e posizionare il tag input ovunque nella pagina HTML e senza vincoli, poiché ad eseguire il compito al posto suo ci penserà il <button> (utile per creare menu e richiamare elementi da un modulo <form>).

Può essere riadattato anche in altre situazioni e con differenti eventi JavaScript, senza troppe complicazioni.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA


3 commenti su “Come cambiare “input file” (Scegli file…) con JS e CSS”