How do I set the css color of a bootstrap switch?

问题

How can I change the blue to another color in this bootstrap switch? I tried changing the color and background-color of the input element but it didn't change the switch color.

Here is the html and the bootstrap link

<div class="custom-control custom-switch ">
  <input type="checkbox" class="custom-control-input" id="customSwitch1" (click)="changeState($event)">
  <label class="custom-control-label text-yb" for="customSwitch1">Activate</label>
</div>

回答1:

to avoid using !important to reset color and bg-color, you may use filter:hue-rotate(xxdeg) ; via a custom class

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate()

The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a <filter-function>.

See also : https://en.wikipedia.org/wiki/Hue

.hr45::before {
  filter: hue-rotate(45deg)
}

.hr90::before {
  filter: hue-rotate(90deg)
}

.hr180::before {
  filter: hue-rotate(180deg)
}

.hr225::before {
  filter: hue-rotate(225deg)
}

.hr327brgtns108::before {
  filter: hue-rotate(327deg) brightness(108%);
}

html {
  display: grid;
  height: 100vh;
}

body {
  margin: auto;
}

label {
  color: #6BBECC;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<body class="m-auto">
  <div class="custom-control custom-switch ">
    <input type="checkbox" class="custom-control-input" id="customSwitch0" (click)="changeState($event)">
    <label class="custom-control-label text-yb hr327brgtns108" for="customSwitch0">Activate #17a2b8</label>
  </div>
  <div class="custom-control custom-switch ">
    <input type="checkbox" class="custom-control-input" id="customSwitch1" (click)="changeState($event)">
    <label class="custom-control-label text-yb hr45" for="customSwitch1">Activate lightpurple</label>
  </div>

  <div class="custom-control custom-switch ">
    <input type="checkbox" class="custom-control-input" id="customSwitch2" (click)="changeState($event)">
    <label class="custom-control-label text-yb hr90" for="customSwitch2">Activate pinkish </label>
  </div>

  <div class="custom-control custom-switch ">
    <input type="checkbox" class="custom-control-input" id="customSwitch3" (click)="changeState($event)">
    <label class="custom-control-label text-yb hr180" for="customSwitch3">Activate brownish </label>
  </div>

  <div class="custom-control custom-switch ">
    <input type="checkbox" class="custom-control-input hr180" id="customSwitch4" (click)="changeState($event)">
    <label class="custom-control-label text-yb hr225" for="customSwitch4">Activate greenish</label>
  </div>
</body>

来源：https://stackoverflow.com/questions/65347357/how-do-i-set-the-css-color-of-a-bootstrap-switch

标签

html

css

twitter-bootstrap