Text inside of a radio button

Question

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>

Answer 1

This is probably as good as it gets without going pretty much fully custom javascript:

http://jsfiddle.net/MU95N/

Only css but you're very limited in what you can do. You'd have to see how hard it is to make it cross-browser though, things may not line up right.

<input type="radio" name="one" id="one">
<label for="one">1</label>
<input type="radio" name="one" id="two">
<label for="two">2</label>
<input type="radio" name="one" id="three">
<label for="three">3</label>
<input type="radio" name="one" id="four">
<label for="four">4</label>

--

label{
    position: relative;
    left: -13px;  
    top: -3px;
    font-size: 8pt;
    opacity: .5;
}