Javascript 单选按钮内的文本

我正在进行如下输入：

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

网格化响应的填充看起来很像单选按钮，只是它们的标签在按钮的内部。不幸的是，传统的单选按钮不行

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

---

我想澄清一下：

• 我不是在找人把所有的输入都编出来
• 我知道我需要使用javascript/jquery/css，但我正在寻找比只使用javascript/jquery的解决方案更优雅的解决方案
• 跨浏览器兼容性至关重要

---

验尸： 我选择了我做的答案，因为它包含了我想要的一切。对于这个答案的读者来说，它在IE7中不起作用。我最终决定使用sprites，但定位标签是个好主意，可能在IE8/9中也能使用（我在mac上，目前还没有虚拟机）

以下是我最终在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>

1.

在不使用完全定制的javascript的情况下，这可能是最好的：

只有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>

---

由于它是一种预设样式的按钮（作为单选按钮，我很确定操作系统或浏览器在使用html编码时会设置默认大小），我很确定您将无法使用html和css将文本放入单选按钮中。也就是说，我一直在寻找你想要的按钮。很自然地，Google等通过各种方法返回了大量结果，但都涉及到编程语言，而不仅仅是html和css

JQuery将完成您想要的按钮，css将使您能够为它们提供一个良好的自定义外观

---

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

为什么不使用css？这里有一个使用jQuery和CSS的

---

老实说，如果没有javascript/css，我想不出实现这一点的方法，因为“单选按钮中的文本”没有真正的html功能。你对jQuery（等）反感有什么特别的原因吗？@waffle paradox-我不反对使用javascript/jQuery/css，我只是想找一些比我现在想的更轻的东西。用css3圆角做一个圆圈？如果你在单选按钮内包装文本，那么你如何选择那个按钮？？？@David Nguyen-css3与IE有多好？这太神奇了。虽然看起来不是100%性感，但经过一些调整，我相信这几乎是准确的。我要跨浏览器测试它。@afuzzyllama:为什么不使用css sprite图像作为背景？@aSeptik-我在考虑这个问题，但我想看看是否有一种更程序化的方法。@afuzzyllama:明白了……不幸的是，没有多少浏览器支持单选按钮的样式。有关更多信息，请参阅。

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