单选按钮内的文本

Question

我正在做一个看起来像这样的输入：

有很多不同的方法来实现这样的输入，但我试图尽可能少的javascript。

网格响应的填充看起来很像单选按钮，除了按钮内部有标签。 不幸的是，传统的单选按钮是行不通的。

我正在寻找一种方法来模仿网格响应的外观而不使用太多的javascript / jquery / crazy css。 有什么建议？

---

只是为了澄清：

• 我不是在找人编写整个输入。
• 我知道我需要使用javascript / jquery / css，但我正在寻找比javascript / jquery唯一解决方案更优雅的东西。
• 跨浏览器兼容性至关重要

---

事后：我选择了我做的答案，因为它包含了我想要的一切。 对于这个答案的读者，它在IE7中不能很好地工作。 我决定最后使用精灵，但是标签的位置是一个好主意，可能在IE8 / 9中工作（我在Mac上，我现在没有VM）

这是我最终做的HTML / CSS明智之举。
使用标签作为选择器并让JS更改背景颜色：

<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

如果没有完全自定义的javascript，这可能就好了：

http://jsfiddle.net/MU95N/

只有css，但你的能力非常有限。 你必须看到使它跨浏览器有多难，事情可能不正确。

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

Answer 2

为什么不用css？ 这是一个使用jQuery和CSS ...

http://jsfiddle.net/TrowthePlow/dGxAN/2/

Answer 3

由于它是预设的按钮样式（作为一个单选按钮，我很确定操作系统或浏览器在用html编码时设置默认大小）我很确定你无法将文本放在单选按钮内使用html和css一起工作。 那说我去寻找能做你想做的按钮。 谷歌等自然会通过各种方法返回大量结果，但所有这些都只涉及html和css以外的编程语言。

我找到的最好的东西是这个jQuery和Css按钮样式系统。 JQuery将完成您想要的按钮，而css将使您能够为他们提供漂亮的自定义外观。

关于如何为按钮创建框架工作的完整代码在页面上，当然你必须修改它以使它成为你想要的方式，但这有望让你开始。