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.
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.