自定义 Bootstrap 5 的 Form-Switch 问题

Question

我正在使用 bootstrap 5 构建的网站。不幸的是，我在使用 Bootstrap 5.1.3

的自定义版本时遇到了表单切换问题

当我通过 CDN 添加 Bootstrap 5.1.3 时，表单开关会正确显示。

但是当我包含我的自定义版本时，即使我像这样导入了所有 bootstrap 组件，表单开关也会恢复为 Safari 中的复选框：

$primary: #00D9E0;
$secondary: #BFFDFF;
$light: #EEEEEE;
$dark: #333333;
$info: #4394B1;
$success: #91C7B1;
$danger: #B33951;
$warning: #E3D081;

@import "../../foundation/bootstrap-5.1.3/scss/bootstrap";

在 Firefox 中它们仍然正确显示。

我是做错了什么还是必须等待更新？

谢谢！

Answer 1

打开文件/scss/forms/_form-check.scss
找到 .form-check-input {
转到第27行（外观：none;）

添加这两行：

-webkit-appearance: none;
 -moz-appearance: none;

重新编译你的 sass 它在 Safari 中应该没问题

自定义 Bootstrap 5 的 Form-Switch 问题

Form-Switch issue with customized Bootstrap 5

css

safari

sass

bootstrap-5