CSS 挑战：自定义电台选择

Question

我设计了一个看起来很酷的表单布局，但不知道如何让它上的收音机工作！以下是表格的模型： 我已经为文本输入创建了 CSS（并将其附在下面以供其他寻找类似内容的人使用）。我现在需要弄清楚的是“您在寻找什么服务？”部分。我已经为蓝色框编写了 CSS，但我现在需要弄清楚如何将“咨询、Web 开发和图形设计”转换为单选框，其中旁边带有复选标记的那个是选中的单选框。远远超过我的头。我仍在努力解决问题，如果我这样做了，我会在这里发帖；只是在寻找一些关于如何编写这些收音机的意见。

文本输入的当前代码：

input[type=text] {
     width: 365px;
     height: 54px;
     margin: 0 0 12px 0;
     padding: 0 0 0 25px;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     background: #a2bdd8;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #76899d), color-stop(0.075, #a2bdd8));
     color: #fff;
     font-size: 30px;
     border: none;
}
*:focus { outline: none; }

“您在寻找什么服务？”的当前背景代码：

#options {
     width: 270px;
     height: 120px;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     background: #a2bdd8;
}

Answer 1

好吧，我知道你得到了答案，但我为你构建了一个 jsFiddle 演示，因为我喜欢这些类型的挑战：

http://jsfiddle.net/Madmartigan/VkTZa/1/

使用 jQuery（想不出一个纯 css 好的解决方案）。可能比使用插件简单一点？

享受吧！

Answer 2

jQuery 有几个单选/复选框插件。我喜欢http://webscale.cms.ezcompany.nl/scan上使用的那个

<script src="/files/jquery.checkbox.min.js"></script>
<link rel="stylesheet" href="/files/jquery.checkbox.css" />
<script>
$('input[type=radio]').checkbox({empty: '/files/empty.png'});
</script>

jquery.com 上的插件列表：http://plugins.jquery.com/plugin-tags/checkbox

Answer 3

您需要创建图像并用这些图像替换您的复选框。然后在单击复选框时使用 javascript 切换它们。

编辑：
我知道，谷歌不再酷了，因为有 SO，但也许你会发现这些链接很有用：
Custom checkbox howto
Another customized checkbox script & tutorial