单选按钮内的文本

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以外的编程语言。

The best thing I found was this jQuery and Css button styling system. JQuery将完成您想要的按钮，而css将使您能够为他们提供漂亮的自定义外观。

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