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

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

CodePudding user response：

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 >
    <input type="checkbox" name="public" checked>
    <label>Subscribe to weekly newsletter</label>
  </div>

  <body>