代码之家 › 专栏 › 技术社区 › Denver Dang

不同颜色的开/关复选框

css

Denver Dang · 技术社区 · 7 年前

我尝试创建三个开/关按钮来模拟简单、中等和困难。我在网上找到一些代码,它们已经制作了一些漂亮的开/关按钮,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中,但没有任何一个成功。

所以我希望能得到一些帮助来解决这个问题?

2 回复 | 直到 7 年前

caiovisk 7 年前

首先,您使用的是scss变量,但没有初始化它:

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

所以,你必须初始化 $lightBrown 在呼叫它之前在您的SCS上。

要设置不同的颜色,必须为其设置类,如:

<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/