The toggle switch style checkbox when checked is blue, when not checked (and hover) that light grey.
Anyone have suggestions on how to change it to be:
Unchecked: green (including hover over)
Checked: red
It's the custom CSS that I am struggling with.
Anyone have suggestions on how to change it to be:
Unchecked: green (including hover over)
Checked: red
It's the custom CSS that I am struggling with.
Hi
With Chronoforms 7, I use that:
.ui.toggle.checkbox input:checked ~ label::before, .ui.toggle.checkbox input:focus:checked ~ label::before {background-color:#56bd97 !important;}
For CF6, if it doesn't work, use your Development tool of your browser( F12 key).
Bye
With Chronoforms 7, I use that:
.ui.toggle.checkbox input:checked ~ label::before, .ui.toggle.checkbox input:focus:checked ~ label::before {background-color:#56bd97 !important;}
For CF6, if it doesn't work, use your Development tool of your browser( F12 key).
Bye
I added custom CSS with this, works🙂
.ui.toggle.checkbox input:focus:checked~label:before {
background-color: #10793F!important;
}
.ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before {
background-color: #10793F!important;
}
.ui.toggle.checkbox input:focus~.box:before, .ui.toggle.checkbox input:focus~label:before {
background-color: #B03A2E!important;
}
.ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before {
background-color: #B03A2E!important;
}
This topic is locked and no more replies can be posted.
