如何用CSS创建自定义水平单选按钮?

时间:2011-06-25 02:11:32

标签: css forms

我想创建单选按钮或其他类型的控件,其行为如下:

[_value1_] [value2] [value3]

选择了Value1,因此它看起来像按下按钮或选定的链接(粗体,没有下划线),其他元素是活动按钮/链接。当用户选择另一个值时 - 状态被更改。我可以手动处理这个事件,问题是 - 我应该用什么插件或现有的css / js组合来实现这个目标?

我很确定这种类型的控件有一个名字,但是无法想出这是什么。我试图搜索自定义样式单选按钮,因为功能相同,但失败了。此外,我尝试了其他一些名称,如开关按钮,但它不是我想要的。它也与制表符非常相似,但制表符通常被设计为需要连接下划线div的东西。所以我正在寻找“单选按钮满足标签”css / js解决方案。

您是否可以帮助我命名此控件,如果您知道它的名称,或者找到可以帮助我实现目标的插件/现有代码?

问题不在于如何自己创建这种类型的功能,我可以做到,但是很奇怪,没有现有的解决方案,我想帮助同样情况的人,也可能是现有的解决方案设计可以更好我可以发明自己,因为我不是设计师。

答案

此类控件可以在“Simplified CSS Tabs”或“CSS Mini Tabs”中找到,但它们需要一些额外的代码才能按预期工作。

此外,这种类型的功能可以在Google中找到jQuery UI radio buttons transformed into a button set和Yahoo UI Button Control: Radio Buttons

1 个答案:

答案 0 :(得分:4)

http://jqueryui.com/demos/button/#radio

为你做的工作:)