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

Question

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

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

如有任何想法，我们将不胜感激。谢谢

Answer 1

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

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

Answer 2

这取决于您使用的复选框类型 - 是否填写 class。您必须根据需要输入 CSS 颜色关键字...只需将我的 'indigo' 替换为您需要的任何颜色即可。

*** 注意 - 变亮和变暗 classes 不适用于此。

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

Answer 3

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

Answer 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;}

Answer 5

抱歉我来晚了，但我最近也遇到了同样的问题所以我分享我是如何修复它的（至少就我而言）

当我遇到这个问题时，我搜索了几乎所有的站点和论坛，但没有找到令我满意的可行解决方案。因此我去了官方 css 库 https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css 并根据我的需要更改了核心值。

对于checkbox刻度线，我需要在两种情况下改变颜色：

第一种是用户点击鼠标勾选框，第二种是用户按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 创建了一个简单的登录表单，

Demo/Preview 这里：https://mrsrv7.github.io/LoginForm/

此处存储库：https://github.com/MrSrv7/LoginForm/

Answer 6

CSS code

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

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

Demo

JSFiddle demo

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

Change color of checkbox in Materialize framework

html

css

frameworks

materialize