通过修改 Ryan Fait 的代码来设置多个单选按钮的样式答案

【问题标题】：Styling Multiple Radio Buttons by modifying Ryan Fait's code通过修改 Ryan Fait 的代码来设置多个单选按钮的样式
【发布时间】：2012-01-26 15:20:26
【问题描述】：

我非常喜欢使用 Ryan Fait 的“样式复选框和单选按钮”代码
click here for demo

我遇到了一些障碍。我正在创建一个对 Ryan 代码有两种用途的调查表。第一次使用使用快乐的大按钮，询问您对所提出的问题是否感到高兴、冷漠或悲伤。第二种用途是“从 0 到 10 分评价您的体验”，我需要使用不同且更小的单选按钮图形。

我收集到不同单选按钮的每个实例都需要自己的 CSS 和类名，但我尝试自己修改 Ryan 的代码，并且 1）我不是 Einstein 并且 2）我在急于完成一些其他项目。我尝试实现这一点的方式是在每个子句中放置一个 IF 语句（移动背景位置），以查找类名（class="hugeButton" vs class="teenyWeeny"）。我要么得到以下两个结果之一：

原来的 LARGE 按钮甚至不再显示了。
当您单击任何按钮时，它们就会消失

有没有人知道我将如何修改 Ryan 的代码：

允许多种图形和尺寸
检查确保它只影响指定的类名元素
帮我洗衣服，让我成为一个 sammich

如果它不能做到#3，我会同意的。

【问题讨论】：

为什么我们需要内容 in 问题的经典示例。链接失效了。

标签： javascript css checkbox radio-button customization

【解决方案1】：

我会说下载另一个脚本副本。在一个 js 文件中，将单词“styled”的所有实例替换为您的第一个类名，在第二个 js 文件中，将单词“styled”的所有实例替换为您的第二个类名。根据您要使用的图标，根据需要调整文件中的图标高度。然后就像你说的，创建单独的 CSS 类。我认为，复选框/单选按钮不应相互影响，因为它们使用具有不同属性的不同脚本。

【讨论】：

你会想的。那是我的第一个想法，但由于某种原因，第一个单选按钮实例“styled1”都消失了，但“styled2”的所有实例都在那里。我在想，第二个脚本覆盖了第一个。

【解决方案2】：

我找到了解决办法，我不敢相信我这么天真。

我必须区分这些功能，它仍然使所有单选按钮和选择框的实例全部不可见，但是 javascript 覆盖了所有功能，因为它们的名称仍然相同，例如Custom.init 和 Custom.init。

我重命名了第二个版本，CustomMini，然后在脚本末尾没有一个窗口加载函数，我只是在页面底部放置了一个 Custom.init 和 CustomMini.init，瞧！

使用相似脚本的两个不同的自定义单选按钮。

我认为必须有一种更动态的方式来做到这一点，但就目前而言，它有效，很好。

【讨论】：

【解决方案3】：

您不需要触摸 javascript - CSS 规则覆盖应该可以工作。

将一个类应用到一个包含较小集合的元素，如果单选按钮 - 通常一个字段集适合这种事情。
添加仅将适当大小和背景图像应用于新包装类中的元素的规则。例如“fieldset.compact input { height: 14px }”

【讨论】：