I'm making an input that looks like this:
There are many different ways to approach making such an input, but I am trying to do it with as little javascript as possible.
The fill-ins for a gridded response look much like a radio button EXCEPT they have their labels on the inside of the button. Unfortunately, the traditional radio button just won't do.
I'm looking for a way to imitate the look of a gridded response without using too much javascript/jquery/crazy css. Any suggestions?
Just to clarify:
- I'm not looking for someone to code up the entire input.
- I know I need to use javascript/jquery/css, but I'm looking for something more elegant than a javascript/jquery only solution.
- Cross browser compatibility is essential
Postmortem:
I picked the answer that I did because it incorporated everything I wanted. To readers of this answer, it doesn't work well in IE7. I decided to go with sprites in the end, but position the label was a good idea and might work in IE8/9 (I'm on a mac and I don't have VMs for them at the moment)
Here is what I eventually did HTML/CSS wise.
Used the label as the selector and have JS change the background-color:
<div style=margin-bottom:5px;>
<div style=float:left;>
<input type=radio name=answer value=awesome id=answer style=display:none;>
</div>
<label style=float:left;background-color:red;background-image:url("/assets/images/radio_circle.png"); for=answer>
<div style=width:20px;height:20px;text-align:center;vertical-align:middle;>
1
</div>
</label>
</div>