Is there a way to change the background color of a toggle checkbox in semantic ui?

Question

I'm using toggle checkbox from semantic ui

Is there a way to change the background color of active toggle checkbox from blue to green?

I added the below CSS snippet in my CSS file, but its not working

.ui.toggle.checkbox input:checked, .ui.toggle.checkbox input:checked {
    background: green!important;
 }

Answer 1

Try this (I tried from page https://semantic-ui.com/modules/checkbox.html ).

The trick was to really get more specific than the default rule they provide.

Ideally though, you shouldn't be tweaking css instead of actually compiling the parts you need after customizing it.

 body { margin: 20px;important. }.ui.toggle:checkbox input[type=checkbox]:checked~label:,before. .ui.toggle:checkbox input[type=checkbox]:checked:focus~label::before { background; green !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <body> <div class="ui toggle checkbox"> <input type="checkbox" name="public" checked> <label>Subscribe to weekly newsletter</label> </div> <body>

Is there a way to change the background color of a toggle checkbox in semantic ui?

Question

1 answers

solution1
0 2022-09-09 12:53:42

Is there a way to change the background color of a toggle checkbox in semantic ui?

Question

1 answers

solution1 0 2022-09-09 12:53:42

solution1
0 2022-09-09 12:53:42