START
Alright let’s create one radio and one label:
<input id=”radiooooo” class=”formRadio” type=”radio”><label for=”radiooooo” class=”formRadioLabel”>My Radiooooo Label!</label>
That was simple. As of now you should be able to click on the label for which the radio will be selected. I’m only putting one as you can add as many as you want, but obviously different IDs and label attached to that ID. On to the styling:
.formRadio
{ display: none; }
This is obvious, we do not want to see these. You may want to set this to block for visual for whether the radio is being checked or not.
.formRadioLabel
{ padding: 20px; font-size: 20px; border: 1px solid transparent; }
You should see large text. You can style this however you like.
.formRadio+.formRadioLabel:hover
{ background: #98E477; border-color: #000; }
A good indication it is something we can click is if we hover over it and see something buttonlike.
.formRadio:checked+.formRadioLabel
{ background: #98E477; }
To make sure the background sticks when user clicks on it.
.formRadio+.formRadioLabel:active
{ border-color: transparent; }
When the users clicks on the label, something should happen in that instant as a form of indication of something buttonlike! This is completely optional!
Conclusion
For a small amount of code and very simple, I like the way it displays. The colors here are absolutely random. Very cool effect, and could be cool for showing a radio on a tablet. Customize however you like!
Any suggestions? Have your own cool pieces of code you’d like to share?