Edit Question - KnowledgeHub

Title Body

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>

Tags (comma-separated) Cancel