单选按钮作为敏感区域？

Question

而不是普通的单选按钮：

我想将它们设计成带有文字的较大区域：

我该怎么做（没有JavaScript）？

---

我设法得到的最接近的是使用带有尺寸属性的输入选择，但我不知道如何将其作为一排水平按钮：

<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网站包含如何执行类似操作的示例。

Here是一个小提琴，我嘲笑了所需的基本代码。这段代码做的很简单。首先它隐藏了默认的单选按钮。其次，重新调整标签和单选按钮的大小。最后，它根据是否选择了单选按钮为背景着色。

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;
}