I browser di defaut non ti permettono di stilizzare via CSS il pulsante “sfoglia” associato agli input type="file". Attraverso il plugin File Style per jQuery possiamo utilizzare un’immagine da sostituire a tale pulsante, ed avere allo stesso tempo la libertà di stilizzare il campo di input via CSS!
Questo lavoro è opera di Mika Tuupola ed è possibile vederlo in azione a questo link.
Compatibilità con i Browser
La compatibilità è garantita su tutti i browser IE6 incluso.
Su IE6 e IE7 si sono mostrati problemi di impaginazione degli elementi utilizzando strutture non lineari come quella riportata in esempio.
Su IE8, Chrome, Safari, Firefox 3.6+, non si è verificato alcun problema.
Come funziona
Il plugin rimpiazza il pulsante sfoglia con un div al quale viene assegnata l’immagine di background che decidiamo di utilizzare. Questa immagine viene quindi sovrapposta al pulsante. Il campo input viene successivamente nascosto e la parte che mostra il file scelto viene sostituita da un normale div di testo facilmente stilizzabile via CSS. A questo input viene assegnata la stessa classe assegnata al campo input type="file". in modo che sia facilmente modificabile.
Come utilizzare il plugin?
Per utilizzare il plugin sarà sufficiente includere nella nostra pagina web la libreria jQuery ed il plugin stesso:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.filestyle.js" type="text/javascript"></script>
A questo punto prepariamo l’immagine che sostituirà il pulsante sfoglia (ricordati di mettere una scritta dentro al pulsante!), segnamo le dimensioni di quest’ultima ed andiamo a lanciare il plugin:
$("input[type=file]").filestyle({
image: "nuovo-pulsante-sfoglia.png",
imageheight : 22,
imagewidth : 82,
width : 250
});E’ bene precisare che è possibile utilizzare qualsiasi formato di immagine e che è possibile targetizzare qualsiasi classe!
Download del plugin
Scarica il sorgente o la versione minimizzata.
