Da web developer quale sono ho sempre desiderato poter personalizzare gli input dei form, magari con stili o sfondi particolari.
Da oggi si può, con un metodo che utilizza Javascript e i fogli di stile CSS.
E’ un metodo valido per quasi tutti browser, eccetto l’ormai moribondo Internet Explorer 6.
Di seguito trovate il link al pacchetto zip contenente un esempio, i file javascript da scaricare e il foglio di stile associato.
Per far girare questo script basta inserire all’interno del tag input la classe “styled”.
<input class="styled" type="checkbox" />
Come lavora?
Il file javascript sostituisce all’interno della pagina html tutti gli elementi che hanno la classe “styled” con un tag span con gli stili assegnati nel CSS, agganciando in automatico anche gli eventi legati al mouse.
Per far lavorare al meglio lo script, con checkbox, radio e select personalizzati bisogna specificare 3 variabili all’interno del file javascript che riguardano le altezze dei checkbox e dei radio e la lunghezza del tag select.
var checkboxHeight = "25"; var radioHeight = "25"; var selectWidth = "190";
Anche per modificare gli stili dei tag basta modificare il foglio di stile.
.checkbox, .radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.gif) no-repeat;
display: block;
clear: left;
float: left;
}
.radio {
background: url(radio.gif) no-repeat;
}
.select {
position: absolute;
width: 158px;
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(select.gif) no-repeat;
overflow: hidden;
}
Esempi
Qui trovate un esempio.
Qui trovate l’articolo intero di Ryanfait.
Modalità d’utilizzo
Lo script è sotto licenza Creative Commons.
Basta lasciare il titolo, il nome e il sito web all’interno del file JavaScript.
Iscriviti al feed di Good2know
Grazie per gli utili spunti presenti sul tuo blog (che ho scoperto da pochi giorni).
Ma sei sicuro che non si debba inserire la dicitura di Creative Commons in modo visibile, come qualsiasi copyright, nel footer delle pagine?
In passato, sono stato tentano di utilizzare script già pronti sotto licenza Creative, ma non era chiaro come indicarne la provenienza e quindi ho rinunciato onde evitare contestazioni (anche perché i clienti non vogliono mai sganciare una lira per licenze o diritti vari).
Sul sito Creative si trovano diciture tipo: “You must attribute the work in the manner specified by the author or licensor…” ecc., ma poi non si capisce quale sia il suddetto “modo specificato dall’autore” o perlomeno io non l’ho capito.
Nel caso tu avessi qualche indicazione in più da darmi te ne sarei grato.
Comunque, a presto e grazie.
Buongiorno Nicola, grazie per aver visitato il mio blog, ti rispondo subito alla questione Licenza Creative Commons.
La Licenza Creative Commons, abbreviata in CCL, prevede che si possano utilizzare risorse altrui basta che si rispetti il volere dell’autore in base a decisione personali.
Ad alcuni basta lasciare il nome, altri invece preferiscono avere la dicitura del copyright sul footer, varia da autore ad autore.
In questo caso lo script creato da Ryan Fait prevede che si lasci all’interno del file Javascript il titolo, il nome e l’URL del sito.
Spero di essere stato utile.
Alla prossima
Si, grazie mille.
Salve,
ho sviluppato, (o più correttamente migliorato) una tecnica non intrusiva per la personalizzazione di elementi checkbox funzionanti da internet explorer 6 in poi.
Il link con il videotutorial di riferimento è disponibile su : http://www.dreamsnet.it/2011/06/personalizzare-checkbox-html-customizing-checkbox-form-html-ie6-compatibile/
Complimenti per il Blog.
Marco Marcoaldi
Ciao Marco, ho testato il plugin e sembra funzionare egregiamente.
Solo una cosa, c’è da regolare l’altezza dello sfondo del checkbox su IE6 perchè viene tagliato un po’ sotto.
Comunque complimente anche a te!
Filippo Matteo Riggio
ciao utilissimo tutorial, ma ho un problema… se volessi metterli allineati orizontalmente? E’ possibile? Come devo modificare lo script?
Altra cosa se volessi mettere l’etichetta sovrapposta al pulsante e non esterna si può fare?
Mi dai una mano
Grazie
Ciao neoxyty, rispondo subito alle tua domande.
Per metterli allineati orizzontalmente devi andare a modificare lo stile CSS del tag “p” che li contiene, inserendo un float:left su di esso.
Anche per quanto riguarda la sovrapposizione dell’etichetta sopra all’input basta solo andare a modificare lo stile dei tag “span” dei vari elementi inserendo un position: absolute e andando a modificare i valori di top, left e z-index.
Spero di esserti stato utile.
Ciao, alla prossima!
ora provo subito… poi ti dico grazie!
non non riesco mi si sovrappongono tutti in left…
Prova a girarmi un link ad una pagina con il codice che stai sviluppando e provo a dare un’occhiata!