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

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

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

Answer 3

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