在 Materialise 框架中更改复选框的颜色答案

【问题标题】：Change color of checkbox in Materialize framework在 Materialise 框架中更改复选框的颜色
【发布时间】：2016-05-17 14:33:35
【问题描述】：

我目前正在使用 Materialize 框架，想知道是否可以更改已填充复选框的颜色，因为它默认为绿色。

<input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
<label for="filled-in-box">Filled in</label>

任何想法将不胜感激。谢谢

【问题讨论】：

标签： html css frameworks materialize

【解决方案1】：

CSS 代码

.custom_checkbox[type="checkbox"]:checked + span:not(.lever)::before {
  border: 2px solid transparent;
  border-bottom: 2px solid #ffd600;
  border-right: 2px solid #ffd600;
  background: transparent;
}

HTML 代码

<label>
    <input type="checkbox" class="custom_checkbox" />
    <span>Text</span>
</label>

演示

JSFiddle demo

【讨论】：

【解决方案2】：

在 Materialise 1.0.0 版中，语言标记与上面给出的不同。用于更改已填充复选框颜色（在我的情况下为蓝灰色）的标记和 CSS 现在如下所示：

/* change colour of filled in check box */

.checkbox-blue-grey[type="checkbox"].filled-in:checked+span:not(.lever):after {
  border: 2px solid #607d8b;
  background-color: #607d8b;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<p>
  <label>
        <input type="checkbox" class="filled-in checkbox-blue-grey" checked="checked" />
        <span>Filled in</span>
      </label>
</p>

【讨论】：

【解决方案3】：

对不起，我迟到了，但我最近也遇到了同样的问题，所以我分享一下我是如何解决的（至少在我的情况下）

当我遇到这个问题时，我在几乎所有的网站和论坛中都进行了查找，但没有得到一个令我满意的有效解决方案。于是我去了官方的 css 库https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css 并根据我的需要更改了核心值。

对于复选框的勾号，我需要在两种情况下更改颜色：

第一种是用户通过鼠标点击选中复选框，第二种是用户按Tab键和空格键选中复选框。

因此，以下更改可能对您有用：

[type="checkbox"].filled-in:checked+span:not(.lever):before{
    border-right:2px solid cyan;
    border-bottom:2px solid cyan;
}

[type="checkbox"].filled-in:checked+span:not(.lever):after{
    border:2px solid black;
    background-color:black;
}

[type="checkbox"].filled-in.tabbed:checked:focus+span:not(.lever):after{
    background-color:black;
    border-color:black;
}

如果您想要完整代码，请访问https://codepen.io/MrSrv7/pen/RwaNeyd

我用 HTML CSS 和 JS 创建了一个简单的登录表单，

在这里演示/预览：https://mrsrv7.github.io/LoginForm/

这里的存储库：https://github.com/MrSrv7/LoginForm/

【讨论】：

【解决方案4】：

如果要更改复选框的所有颜色：

input[type="checkbox"]:checked + span:not(.lever)::before{border:2px solid transparent;border-bottom:2px solid #006AB5;border-right:2px solid #006AB5;background:transparent;}

【讨论】：

【解决方案5】：

这取决于您使用的复选框类型 - 填充类或不填充类。您必须根据需要输入 CSS 颜色关键字...只需将我的“靛蓝”替换为您需要的任何颜色。

*** 注意 - Ligthen 和 Darken 类不适用于此。

.checkbox-indigo[type="checkbox"] + label:before{
    border: 2px solid indigo;
    background: transparent;
}
.checkbox-indigo[type="checkbox"]:checked + label:before{
    border: 2px solid transparent;
    border-bottom: 2px solid indigo;
    border-right: 2px solid indigo;
    background: transparent;
}
.checkbox-indigo.filled-in[type="checkbox"] + label:after{
    border: 2px solid indigo;
    background: transparent;
}
.checkbox-indigo.filled-in[type="checkbox"]:checked + label:after{
    background: indigo;
}
.checkbox-indigo.filled-in[type="checkbox"]:checked + label:before{
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

http://embed.plnkr.co/zWaJVtsAVXxs0fVLmxRH/

【讨论】：

【解决方案6】：

在复选框输入中添加一个类，该类将为标签的伪元素之后设置样式

.checkbox-orange[type="checkbox"].filled-in:checked + label:after{
     border: 2px solid #ff9800;
     background-color: #ff9800;
}

<input type="checkbox" class="filled-in checkbox-orange" id="filled-in-box" checked="checked" />
<label for="filled-in-box"></label>

【讨论】：

我刚试过这个，它似乎不起作用。知道它是否改变了吗？
@Stupid.Fat.Cat 使它成为 label:before 而不是 after 伪 el