单选按钮内的文本

Question

我正在制作一个输入框，它看起来像这样：
有许多不同的方法可以制作这样的输入框，但我试图尽可能少地使用javascript。

网格响应的填充方式看起来非常像单选按钮，除了它们的标签在按钮内部。不幸的是，传统单选按钮行不通。

我正在寻找一种在不使用太多javascript/jquery/crazy css的情况下模拟网格响应外观的方法。有什么建议吗？ 只是为了澄清：

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

事后总结: 我选择这个答案是因为它包含了我想要的一切。对于本回答的读者而言，它在IE7上效果不佳。最终，我决定使用雪碧图，但位置标签是一个好主意，可能适用于IE8/9（我使用mac，目前没有VMs）。

这是我最终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>

- afuzzyllama

---

@ waffle paradox - 我并不反对使用javascript/jquery/css，我只是在寻找比我现在想到的更轻量级的东西。 - afuzzyllama

使用CSS3圆角来制作一个圆形？ - David Nguyen

如果您将文本包装在单选按钮中，那么如何选择该按钮？ - xkeshav

@David Nguyen - CSS3 在 IE 上兼容性如何？ - afuzzyllama

你无法更改所有浏览器中单选按钮（圆形大小）本身的大小，只能更改控件的宽度/高度。标准HTML单选按钮的外观和感觉由操作系统控制。因此，您需要创建自定义按钮，使其成为圆形，然后将它们放在非常接近的位置。当您单击其中一个时，您需要使用jQuery（或某些JavaScript框架）来更改自定义图像上的图像，以便它看起来像已被单击。 - Entree

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

- James Montagne

---

这相当惊人。虽然现在看起来不是100%的性感，但通过一些微调，我相信它几乎可以完美。我将对其进行跨浏览器测试。 - afuzzyllama

@afuzzyllama：为什么你不使用CSS精灵图作为背景？ - Luca Filosofi

@aSeptik - 我也考虑过那个方法，但我想看看是否有更加程序化的方式。 - afuzzyllama

Answer 2

为什么不使用css？这里有一个使用jQuery和CSS的示例... http://jsfiddle.net/TrowthePlow/dGxAN/2/

- josh.trow

---

@afuzzyllama：明白了...不幸的是，很少有浏览器支持样式化单选按钮。请参阅http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/获取更多信息。 - josh.trow

Answer 3

由于它是一个预设的按钮样式(作为单选按钮，我非常确定操作系统或浏览器在使用html编码时设置默认大小)，我相信您无法仅使用html和css在单选按钮内放置文本。尽管如此，我还是去查找了适合您需求的按钮。当然，Google等搜索引擎返回了很多通过各种方法实现的结果，但所有这些方法都涉及除了html和css之外的编程语言。

我发现的最好的方法是使用jQuery和Css按钮样式系统。 JQuery将完成您所需的按钮操作，而CSS则可以让您自定义漂亮的外观。

完整的代码如何创建按钮框架均已在该页面上列出，当然，您需要进行修改以使其符合您的要求，但这应该能帮助您入门。

- Jem