Radio buttons as sensitive areas?

Question

Instead of normal radio buttons:

I'd like to style them as larger areas with text:

How can I do that (without JavaScript)?

---

The closest I managed to get was using an input select with a size attribute, but I don't know how to stlye that as a horizontal row of buttons either:

<select name="question_1" size="5">
    <option value="1">strongly disagree</option>
    <option value="2">disagree</option>
    <option value="3">neither</option>
    <option value="4">agree</option>
    <option value="5">strongly agree</option>
</select>

Answer 1

This website contains examples of how to do a similar thing.

Here is a fiddle in which I mocked up the basic code required. What this code is doing is simple. First it is hiding the default radio button. Second it re-sizing the label and radio button. Finally it is coloring the background based on whether or not the radio button is selected.

HTML

<form action="">
    <input type="radio" id="radio1" name="group1" />
    <label for="radio1">Agree</label>
    <input type="radio" id="radio2" name="group1" />
    <label for="radio2">Neutral</label>
    <input type="radio" id="radio3" name="group1" />
    <label for="radio3">Disagree</label>
</form>

CSS

input[type=radio] {
    display:none;
}
input[type=radio]:checked + label {
    background-color: gray;
}
input[type=radio] + label {
    padding:15px;
}
label {
    background-color: red;
}