不同颜色的开/关复选框

Question

我正在尝试创建三个开/关按钮来模拟容易，中等和困难的困难。我在网上找到了一些代码，这些代码已经制作了一些漂亮的开/关按钮imo，我已尝试设置它们的样式。我的问题是我希望每个按钮在打开时都具有不同的颜色（简单= $primaryGreen，中等= $yellowish和坚硬= $primaryRed）。但是，我似乎无法弄清楚将其应用于每个单独的按钮。仅适用于所有人。

当前我的按钮如下所示：

https://jsfiddle.net/dnk8acym/8/

我试图对此特定代码进行处理：

    input.toggle:checked + label:before {
        background-color: $primaryGreen;
        opacity: 0.5
    }

    input.toggle:checked + label:after {
        background-color: $primaryGreen;
        margin-left: calc(100% - 55px);
        box-shadow: none;
    }

向每个标签添加类，并将该类添加到此CSS，但是没有一个起作用。

所以我希望对我如何解决这个问题有所帮助？

Answer 1

首先，您正在使用SCSS变量，但未对其进行初始化：

input.toggle + label:after {
    ...
    background-color: $lightBrown;
    ...
}

因此，您必须在SCSS上初始化$lightBrown，然后再调用它。

要设置不同的颜色，您必须为其设置类，例如：

<input id="toggle1" class="toggle easy">
<input id="toggle2" class="toggle medium">
<input id="toggle3" class="toggle hard">

SCSS：

    input.toggle.easy:checked + label:before,
    input.toggle.easy:checked + label:after {
      background-color: $primaryGreen;
    }
    input.toggle.medium:checked + label:before,
    input.toggle.medium:checked + label:after {
      background-color: $yellowish;
    }
    input.toggle.hard:checked + label:before,
    input.toggle.hard:checked + label:after {
      background-color: $primaryRed;
    }

请参阅：https://jsfiddle.net/dnk8acym/16/

Answer 2

此链接Link to the answer中已经存在您的问题的答案。为了简短起见，如果不使用第三方插件，则无法编辑复选框的颜色。