Different colors on on/off checkboxes

Question

I am trying to create three on/off buttons to simulate difficulties easy, medium, and hard. I found some code online that already made some beautiful on/off buttons, imo, which I have tried to style. My problem is that I would like each button to have different colors when on (easy = $primaryGreen, medium = $yellowish, and hard = $primaryRed). However, I can't seem to figure out to to apply this to each individual button. Only for all of them.

Currently my buttons look like this:

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

I have tried to do stuff to this particular code:

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

Adding classes to each label, and adding the class to this CSS, but none of it worked.

So I was hoping for some help to how I go about solving this ?

caiovisk · Accepted Answer · 2018-07-12T01:34:55.533

First of all, you're using a SCSS variable but not initializing it:

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

So, you have to initialise $lightBrown on your SCSS before calling it.

To set different colors you have to set classes for it like:

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

See: https://jsfiddle.net/dnk8acym/16/

score -1 · Answer 2 · answered Jul 12 '18 at 01:11

-1

There's already an answer to your question in this link Link to the answer. To make things short, you can't edit the checkbox color without using third party plugin.

answered Jul 12 '18 at 01:11

Alvin Ching

25
1
7

First of all, who down-voted my answer? It seems you lack in observing the question. There's an answer to this question but, as you observed in his TAG (which is only css) it cant be resolved. That's why I pointed out that he needs to use third party plugin. I know it can be answered through JS, SCSS, etc. But I just answered it based on his TAG. – Alvin Ching Jul 12 '18 at 02:15
I didn't downvote you, however, you must be incorrect since the other answer in this thread solved it just by the use of css. And it worked like a charm. – Denver Dang Jul 12 '18 at 02:46
Its an SCSS though. It might be the same as CSS in syntax but its different in functionality. Well, whoever downvoted my answer, good luck for him. hahaha – Alvin Ching Jul 13 '18 at 02:29

Different colors on on/off checkboxes

2 Answers2