如何设置引导开关的CSS颜色? [英] 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.
这是html和引导程序链接
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>推荐答案
为避免使用！important 重置颜色和bg-color，可以使用 filter:hue-rotate(xxdeg); 通过自定义类
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/zh-CN/docs/Web/CSS/filter-function/hue-rotate()
hue-rotate() CSS函数旋转元素及其内容的色相.其结果是< filter-function> .
The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a <filter-function>.
另请参见: 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>这篇关于如何设置引导开关的CSS颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
