Text inside of a radio button

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>