Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Toggle checkbox color [feature request]

See original GitHub issue

Is it possible to add color prop to <Checkbox toggle />? Right now it’s with !important and it’s not even possible to change color without changing semantic.css.

.ui.toggle.checkbox input:checked~.box:before,
.ui.toggle.checkbox input:checked~label:before {
  background-color: #2185D0 !important
}
.ui.toggle.checkbox input:focus:checked~.box:before,
.ui.toggle.checkbox input:focus:checked~label:before {
  background-color: #0d71bb !important
}

Issue Analytics

State:
Created 6 years ago
Reactions:4
Comments:5 (1 by maintainers)

Top GitHub Comments

12reactions

farhansalamcommented, Jan 2, 2018

this works in SUIR

.ui.toggle.checkbox input:focus:checked~.box:before,
.ui.toggle.checkbox input:focus:checked~label:before {
    background-color: teal !important
}

.ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before {
    background-color: grey;
}

10reactions

lisandelacruzcommented, Jan 16, 2018

@farhansalam solution is great but when the Toggle loses focus, it changes to the default blue color, you also need to add:

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: #YOUR_CUSTOM_COLOR !important;
}