CSS挑战：自定义广播选择

我设计了一个非常酷的外观布局，但没有线索如何使它的收音机工作！下面是这个表格的模型： Sample of Form 我已经为文本输入创建了CSS（并且将在下面为其他寻找类似的东西的人添加它）。我现在需要弄清楚的是“你在找什么服务？”部分。我已经为蓝框编写了CSS，但是现在我需要弄清楚如何将“咨询，Web开发和图形设计”转变为无线电选择，其旁边带有复选标记的选择框是选定的无线电框。超过我的头。我仍然试图弄清楚，如果我这样做会回来的。只是寻找一些关于你如何写这些无线电的输入。CSS挑战：自定义广播选择

文本输入电流代码：

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

来源

2011-04-25 Robert Klubenspies

可能相关：http://stackoverflow.com/questions/5112995/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo – Blender 2011-04-25 01:44:48

jQuery有几个收音机/复选框插件。我喜欢jquery.com上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>

插件列表中使用的一个：http://plugins.jquery.com/plugin-tags/checkbox

来源

2011-04-25 01:52:52 Rudie

Jquery-Checkbox（在谷歌代码上）做到了！谢谢你的领导:) – 2011-04-25 02:45:49

是的，我喜欢那个。非常简单的JS和其他一切可以在CSS中完成：所有状态，大小，边距等 – Rudie 2011-04-25 02:54:51

您需要创建图像并将其替换您的复选框这些图像。然后当点击复选框时用javascript切换它们。

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

来源

2011-04-25 01:43:25 Damb

听起来像是个计划。这就是我正在计算，但我试图避免使用Javascript。猜猜我没有选择。并回答你的问题，只是几个朋友。你有任何设计建议，让它看起来更好？ – 2011-04-25 01:47:35

在纯css afaik中不可能做出这样的更改。而我的设计建议只是一个主观的意见，所以可能不会有帮助。但是..我肯定会开始添加对比度（至少要提交按钮），并调整字体大小。 – Damb 2011-04-25 01:51:14

你可以做没有JS的样式，但是切换仍然是JS。例如'input [type =“checkbox”] + span {..unchecked ..} input [type =“checkbox”]：checked + span {..checked ..}'（并隐藏输入） – Rudie 2011-04-25 01:55:50

好了，我来看看你得到一个答案，但我建你的jsfiddle演示，因为我喜欢这些类型的挑战：

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

用了jQuery（想不出一个纯CSS好的解决方案）。也许这比使用插件简单一点？

享受！

来源

2011-04-25 02:51:04

谢谢，这是非常全面的。并努力+1！我将不得不看我如何实现它:) – 2011-04-26 06:06:35

CSS挑战：自定义广播选择

回答

相关问题