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

shish_2022 0
Viewed 28

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;
 }
semantic-ui-react semantic-ui css-selectors user-interface css
1 Answers

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>

IT goldman0
Related