如何设置bootstrap交换机的css颜色？

czfnxgou 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(210)

如何将这个bootstrap开关中的蓝色更改为另一种颜色？我尝试更改输入元素的颜色和背景色，但没有更改开关颜色。

下面是html和 Bootstrap 链接

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

twitter-bootstrap

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

3条答案

按热度按时间

2guxujil1#

要避免使用!important重置颜色和背景颜色，您可以通过自定义类使用filter:hue-rotate(xxdeg) ;
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate()
CSS函数的作用是：旋转元素及其内容的色调。其结果是<filter-function>。
另请参阅：https://en.wikipedia.org/wiki/Hue
第一个

赞(0）回复(0）举报 2022-12-07

txu3uszq2#

只需将其添加到您的css文件中，或添加到<style>... </style>之间的html文件中，即可更改开关的背景颜色-它还可以删除或修改蓝色圆圈和阴影。=]

.form-switch .form-check-input {
    height: 24px;
    width: 48px;
}
.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}
.form-switch .form-check-input:checked {
    background-color: #30D158;
    border-color: #30D158;
    border: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}

赞(0）回复(0）举报 2022-12-07

z31licg03#

您可以简单地应用自己的样式，如下所示：

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #38b44a !important;
    background: #38b44a !important;
}

赞(0）回复(0）举报 2022-12-07

我来回答

如何设置bootstrap交换机的css颜色？

3条答案

相关问题

热门标签

最新问答