标签: bootstrap-themes

我想定义我自己的主题颜色，以便覆盖标准引导元素，并稍后将该值用于我自己的组件。这是我在 scss 文件中使用的代码：

$theme-colors: (
    "primary": #611fe6,
    "secondary": #ffbd58,
    "dark": #000000
);

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";


.fa-li {
    color: $primary;
}

.fa-li 然后具有 bootstrap 的原始原色，而不是我自己的。

根据Google选择控件（复选框、单选按钮、开关）的材料指南，这些输入字段应如下所示：

v3.x 的 Bootstrap Paper 主题（现在在 v4 中称为 Materia）的样式旨在达到此设计目标

在 Chrome 中，输入的风格化是正确的，但所有其他浏览器只是回退到本机输入控件，这破坏了设计隐喻的一致性。

这是jsFiddle / Stack Snippets中的 MCVE ，它的工作/失败取决于浏览器：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" rel="stylesheet"/>


<div class="checkbox">
  <label><input type="checkbox" value="check1"/> Check Opt 1 </label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="check2" checked/> Check Opt 2</label>
</div>

<div class="radio">
  <label><input type="radio" value="radio1" name="grp1" />Radio Opt 1</label>
</div>
<div class="radio">
  <label><input type="radio" value="radio2" name="grp1" checked/>Radio Opt 2</label>
</div>

前面的代码在每个浏览器中的表现如下：

是否有可能的解决方法，或者我们是否受浏览器的摆布，以他们认为合适的方式设置输入样式？

这个问题也在github 问题 #497 的项目问题页面上提出，但因浏览器不兼容而关闭