Different colors for different values

[Olivier Leplus]

Hi.

Is it possible to have different color of background regarding the selected value?
Would be nice for on/off switches for example :)

[Ionuț Colceriu]

Sure. You can take a look at the ios and android themes on the main demo page, to see how it works for the light/checkbox switch:

https://ghinda.net/css-toggle-switch/

For the switch/radio switch you could use the nth-child selector to target an individual label, and create a pseudo-element for it that fills up the entire background. This way you could have a different background for each selected item.

[Peter Haworth]

I'd like to do that too but my css skills aren't up to it. Any chance you could publish an example?

[Ionuț Colceriu]

Sure, here's a demo:
http://s.siloz.io/G

[Peter Haworth]

Thanks for that. How would I use Bootstrap color classes instead of html colors?

…

On Wed, Aug 16, 2017 at 2:25 AM, Ionuț Colceriu ***@***.***> wrote: Sure, here's a demo: http://s.siloz.io/G — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#38 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIGhFLoN2kXW5Dkv4EqrqElAhOw2GEFOks5sYrWHgaJpZM4DFXNI> .

[Ionuț Colceriu]

If you use Sass and Bootstrap 4, you can get the colors from their variables file:
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L46

[Peter Haworth]

OK thanks. I'm using Bootstrap 3 right now but can probably find them somewhere in their css file.

…

On Fri, Aug 18, 2017 at 2:42 AM, Ionuț Colceriu ***@***.***> wrote: If you use Sass and Bootstrap 4, you can get the colors from their variables file: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L46 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#38 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIGhFIbsfu95Aq32MNSLXXEQSRVynVjJks5sZVx5gaJpZM4DFXNI> .

[Peter Haworth]

on't seem to be able to get this working. I'm using it on a switch-light not a swith-toggle, not sure if that makes any difference. Here's the html.

<label class="switch-light" onclick=""> <input name="Publish" type="checkbox" {{Published}}> <span class="alert alert-light"> <span>No</span> <span>Yes</span> <a class="btn btn-success disabled"></a> </span> </label>

and the css:

`input:checked:nth-of-type(1) ~ a {
background: red;
}

input:checked:nth-of-type(2) ~ a {
background: green;
}`

Both parts of the switch appear in the btn-success color. I also tried it without the class statement in the a tag and no colors were displayed.

[Ionuț Colceriu]

That will only work for the radio switch.
Try this for the checkbox switch: http://s.siloz.io/H

[Peter Haworth]

Thanks for this. I see it working in the example you gave but for some reason, it doesn't work in my environment. Here's the css I copied from your example with the custom colors: .switch-light > span { background: #5cb85c !important; } .switch-light input:checked ~ span { background: #eea236 !important; } I copied the html from your example to a page on my website. Initially, Off is a light green and On is a darker green. When I click Off, its background changes to orange and On changes to the light green. Clicking again goes back to the original 2 different green colors. Here's what I would like to happen, Whichever part of the switch is not checked should be a light grey color. If On is checked, it should be green and and Off should be light grey if Off is checked, it should be orange and On should be light grey. Is it possible to do that? Thanks, Pete

…

On Mon, Aug 21, 2017 at 1:15 AM, Ionuț Colceriu ***@***.***> wrote: That will only work for the radio switch. Try this for the checkbox switch: http://s.siloz.io/H — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#38 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIGhFPLeKnEOx7QqBEFjZE9r1vKoFpPeks5saTyIgaJpZM4DFXNI> .