Wednesday, February 2nd, 2011
The humble radio button is a bit, well boring…
Look at it, all round and what not; Why not have some fun with it?I’ve been working on a backend for a few clients of mine and thought I’ll add some form to enhance the function of the humble radio button.
So, where to begin? Well let’s take some HTML like this:
So this gives us something like:
But this isn’t very magical, so we apply some simple CSS:
label
{
display: block;
float: left;
margin: 5px;
cursor: pointer;
}
label input
{
display: none;
}
label img
{
border: 4px solid #ffffff;
}
label input:checked + img
{
border-color: #0080FF;
}
{
display: block;
float: left;
margin: 5px;
cursor: pointer;
}
label input
{
display: none;
}
label img
{
border: 4px solid #ffffff;
}
label input:checked + img
{
border-color: #0080FF;
}
And this gives us something like:
And with this you get all the features of the radio button but it looks much nicer!
