blocks|key|1577509|text|对于角度材质7，适用于轮廓颜色和内部填充颜色|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1577510|::ng-deep+.mat-checkbox-checked.mat-accent+.mat-checkbox-ripple+.mat-ripple-element+{
++++opacity:+0.03+!important;
++++background-color:+#005691!important;
++}

::ng-deep+.mat-checkbox-checked.mat-accent+.mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent+.mat-checkbox-background+{
++++background-color:+#005691;
++}|code-block|syntax|javascript|1577511|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For Angular Material 7, works for outline color and inside filled in color

<pre><code>::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
 opacity: 0.03 !important;
 background-color: #005691!important;
 }

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
 background-color: #005691;
 }
</code></pre>

blocks|key|1920195|text|如果你使用主题，你不需要添加css，只需在<mat-checkbox>中添加属性颜色即可|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1920196|<mat-checkbox+color="primary">Primary</mat-checkbox>|1920197|1920198|可以使用<mat-checkbox>属性更改颜色。默认情况下，复选框使用主题的强调颜色。这可以更改为'primary‘或'warn’Checkbox+%7C+Angular+Material|blockquote|1920199|1920200|entityMap|0|LINK|mutability|MUTABLE|url|https://material.angular.io/components/checkbox/overview#theming^0|L|E|0|0|1G|0|0|4|E|1U|R|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|L|3|-4|5|6|7|17|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

You don't have to add css if you'r using theme, just add attribute color to <code>&lt;mat-checkbox&gt;</code>
<code>&lt;mat-checkbox color=&quot;primary&quot;&gt;Primary&lt;/mat-checkbox&gt;</code>
<blockquote>
The color of a <code>&lt;mat-checkbox&gt;</code> can be changed by using the color property. By default, checkboxes use the theme's accent color. This can be changed to 'primary' or 'warn'
<a href="https://material.angular.io/components/checkbox/overview#theming" rel="noreferrer">Checkbox | Angular Material</a>
</blockquote>

blocks|key|1577434|text|执行此操作的深度方法之一是使用/+standard+/选择器|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1577435|mat-checkbox+{
++++color:+rgb(0,178,0);
++++/deep/+.mat-checkbox-background+{
++++++++background-color:+rgb(0,178,0);
++++}

++++/deep/+&.mat-checkbox-focused{
++++++++.mat-ink-ripple{
++++++++++++background-color:+rgba(0,+178,+0,+.26);
++++++++}
++++}
}|code-block|syntax|javascript|1577436|这将允许您覆盖启用了Shadow+Dom的组件中的样式。|1577437|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors^0|H|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

One of the <a href="https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors" rel="noreferrer">standard</a> ways to do this is to utilize the /deep/ selector

<pre><code>mat-checkbox {
 color: rgb(0,178,0);
 /deep/ .mat-checkbox-background {
 background-color: rgb(0,178,0);
 }

 /deep/ &amp;.mat-checkbox-focused{
 .mat-ink-ripple{
 background-color: rgba(0, 178, 0, .26);
 }
 }
}
</code></pre>

That will allow you to override styles in components where Shadow Dom is enabled.

blocks|key|4031109|text|这个解决方案对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4031110|.mat-checkbox-ripple+.mat-ripple-element,
.mat-checkbox-checked.mat-accent+.mat-checkbox-background+{
++background-color:+$your-color+!important;
}|code-block|syntax|javascript|4031111|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This solution works well for me
<pre class="lang-css prettyprint-override"><code>.mat-checkbox-ripple .mat-ripple-element,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
 background-color: $your-color !important;
}
</code></pre>

blocks|key|4030992|text|默认颜色取决于您在@中导入的主题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4030993|但是angular材料也提供了定制主题或者定制组件的方法，比如改变复选框的颜色。|offset|length|style|BOLD|4030994|执行此操作的步骤如下:-|4030995|1.)导入_theming.scss文件|4030996|+@import+"../node_modules/@angular/material/theming";|code-block|syntax|javascript|4030997|2.)指定accent颜色，即您要应用的复选框的颜色，如下所示:-|4030998|++//+customising+of+the+mat-checkbox+accordiing+Theme.+i+am+using+pink+indigo+theme+
+++++bydefault+so+here+I+am+changing+the+checkbox+color+from+pink+to+grey.


++++$candy-app-primary:+mat-palette($mat-indigo);

++++//+here+I+am+specify+the+grey+instead+of+Pink.

++++$candy-app-accent:+mat-palette($mat-grey,+600,+500,+900);
++++$candy-app-warn:+mat-palette($mat-red);

++++//+Create+the+theme+object+(a+Sass+map+containing+all+of+the+palettes).
++++$candy-app-theme:+mat-light-theme($candy-app-primary,+$candy-app-accent,+$candy-app-warn);

++++//+here+I+am+only+calling+checkbox+mixin+because+i+only+want+to+change+the+checkbox+color+++++
++++@include+mat-checkbox-theme($candy-app-theme);|4030999|希望这能有所帮助。|4031000|entityMap^0|0|X|3|0|6|6|0|0|0|5|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@$D|13|E|14|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|16|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|S|3|T|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1B|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|X|$]]

Default color depends upon the theme which you @import.

But angular material also provide way to customize the theme or for customizing the components like changing the color of checkbox.

Steps of doing this as follow :- 

1.) Import the _theming.scss file 

<pre><code> @import "../node_modules/@angular/material/theming";
</code></pre>

2.) Specify the accent color i.e. color of check box you want to apply like below :-

<pre><code> // customising of the mat-checkbox accordiing Theme. i am using pink indigo theme 
 bydefault so here I am changing the checkbox color from pink to grey.


 $candy-app-primary: mat-palette($mat-indigo);

 // here I am specify the grey instead of Pink.

 $candy-app-accent: mat-palette($mat-grey, 600, 500, 900);
 $candy-app-warn: mat-palette($mat-red);

 // Create the theme object (a Sass map containing all of the palettes).
 $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

 // here I am only calling checkbox mixin because i only want to change the checkbox color 
 @include mat-checkbox-theme($candy-app-theme);
</code></pre>

Hope it will help.

blocks|key|4031091|text|Angular+7%2B|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4031092|这将适用于checkbox以及初始波纹颜色。如果只更改复选框的背景，初始的波纹颜色将不会更新。这就解决了问题。|4031093|SCSS：|4031094|::ng-deep+.mat-checkbox-checked.mat-accent+{
++++.mat-checkbox-ripple+.mat-ripple-element+{
++++++++background-color:+$your-color+!important;
++++}

++++.mat-checkbox-background,+.mat-checkbox-indeterminate.mat-accent+.mat-checkbox-background+{
++++++++background-color:+$your-color;
+++++}
}

::ng-deep+.mat-checkbox.mat-accent+{
++++.mat-checkbox-ripple+.mat-ripple-element+{
++++++++background-color:+$your-color+!important;
++++}
}|code-block|syntax|javascript|4031095|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Angular 7+

This will work for checkbox as well as the initial ripple color. If you just change the background for the checkbox, the initial ripple color won't update. This resolves the issue.

SCSS:

<pre><code>::ng-deep .mat-checkbox-checked.mat-accent {
 .mat-checkbox-ripple .mat-ripple-element {
 background-color: $your-color !important;
 }

 .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
 background-color: $your-color;
 }
}

::ng-deep .mat-checkbox.mat-accent {
 .mat-checkbox-ripple .mat-ripple-element {
 background-color: $your-color !important;
 }
}
</code></pre>

blocks|key|1577442|text|对于角度材质为beta.2的情况，color属性应该可以工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1577443|在beta.2之前它有一些问题。2|1577444|1577445|查看修复该问题的commit。|blockquote|1577446|1577447|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/material2/commit/7ac29f8afa3b8b47a138bfffa3c59059b4f8f7c6^0|H|5|0|0|0|8|6|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|L|3|-4|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

With beta.2 of Angular Material, the <code>color</code> attribute should work.

There were some issues with it before beta.2

<blockquote>
 See the <a href="https://github.com/angular/material2/commit/7ac29f8afa3b8b47a138bfffa3c59059b4f8f7c6" rel="nofollow noreferrer">commit</a> that fixed that issue.
</blockquote>

blocks|key|4031330|text|有两种方法(据我所知)可以改变mat-checkbox+(angular+9)的背景颜色-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4031331|方法1-使用mat-复选框的颜色属性。|4031332|+++++++<mat-checkbox
++++++++++id="{{+subtask.name+}}"
++++++++++[color]="accent"
++++++++>
++++++++++Check
++++++++</mat-checkbox>|code-block|syntax|javascript|4031333|限制-通过此方法只能根据角度材质主题使用颜色。|4031334|方法2-如果你想给mat提供自定义的颜色--checkbox首先跟踪类直到你想要改变颜色的目标类。tracking+of+nested+classes|offset|length|4031335|在你的style.css(全局)文件中像这样写完之后-|4031336|第一个复选框|4031337|.l0
++.mat-checkbox-checked
++.mat-checkbox-layout
++.mat-checkbox-inner-container
++.mat-checkbox-background+{
++background-color:+#ffbf00+!important;
}|4031338|第二个复选框|4031339|.l1
++.mat-checkbox-checked
++.mat-checkbox-layout
++.mat-checkbox-inner-container
++.mat-checkbox-background+{
++background-color:+#4caf50+!important;
}|4031340|结果-+different+color+for+different+mat-checkbox|4031341|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/KkFDh.png|1|https://i.stack.imgur.com/0t1U8.png^0|0|0|0|0|1D|Q|0|0|0|0|0|0|0|4|16|1|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1D|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1E|8|@]|9|@$M|1F|N|1G|1|1H]]|A|$]]|$1|O|3|P|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1J|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1L|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1M|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|6|7|1N|8|@]|9|@$M|1O|N|1P|1|1Q]]|A|$]]|$1|10|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|13|14|15|A|$16|19]]]]

There are two methods(that i know ) to change the background color of mat-checkbox (angular 9)-
method 1 - by using color property of the mat-checkbox .
<pre><code> &lt;mat-checkbox
 id=&quot;{{ subtask.name }}&quot;
 [color]=&quot;accent&quot;
 &gt;
 Check
 &lt;/mat-checkbox&gt;
</code></pre>
Limitation - You can only use color according to the angular material theme by this method .
method 2 - If you want to give custom colors to the mat-checkbox first track down the classes till the target class you want to change color of. <a href="https://i.stack.imgur.com/KkFDh.png" rel="nofollow noreferrer">tracking of nested classes</a>
after that write like this in your style.css(global) file-
1st checkbox
<pre><code>.l0
 .mat-checkbox-checked
 .mat-checkbox-layout
 .mat-checkbox-inner-container
 .mat-checkbox-background {
 background-color: #ffbf00 !important;
}
</code></pre>
2nd checkbox
<pre><code>.l1
 .mat-checkbox-checked
 .mat-checkbox-layout
 .mat-checkbox-inner-container
 .mat-checkbox-background {
 background-color: #4caf50 !important;
}
</code></pre>
Result - <a href="https://i.stack.imgur.com/0t1U8.png" rel="nofollow noreferrer">different color for different mat-checkbox</a>

blocks|key|1920110|text|这应考虑到默认复选框颜色|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1920111|md-checkbox+.md-icon+{
++++background:+green;
}
md-checkbox.md-default-theme.md-checked+.md-icon+{
++++background:+green;
}|code-block|syntax|javascript|1920112|点击Angular+Material+Documentation了解更多信息|offset|length|1920113|entityMap|0|LINK|mutability|MUTABLE|url|https://material.angularjs.org/latest/CSS/checkbox^0|0|0|2|U|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

This should take care of the default checkbox color

<pre><code>md-checkbox .md-icon {
 background: green;
}
md-checkbox.md-default-theme.md-checked .md-icon {
 background: green;
}
</code></pre>

read more here at <a href="https://material.angularjs.org/latest/CSS/checkbox" rel="nofollow">Angular Material Documentation</a>

blocks|key|4030925|text|以下选项在未选中时会使框架保持灰色，但在选中时会更改为自定义颜色：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4030926|relevant-scss-file.scss|offset|length|style|BOLD|4030927|mat-checkbox+{
++&.mat-checkbox-disabled.mat-checkbox-checked+.mat-checkbox-background+{
+++background:+rgb(0,178,0);
++}
}|code-block|syntax|javascript|4030928|entityMap^0|0|0|N|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

The following will keep frame grey when unchecked but change to custom color when checked:

relevant-scss-file.scss

<pre><code>mat-checkbox {
 &amp;.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background {
 background: rgb(0,178,0);
 }
}
</code></pre>

blocks|key|1920217|text|因为deep已被弃用。在我看来，正确的方法是使用encapsulation:+ViewEncapsulation.None。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1920218|例如：|1920219|@Component({
++selector:+'...',
++templateUrl:+'...',
++styleUrls:+['...'],
++encapsulation:+ViewEncapsulation.None,
})|code-block|syntax|javascript|1920220|然后，您只需更改类|1920221|.mat-checkbox-background+{
++background-color:+green;
}|1920222|您只需小心处理全局css内容即可。在SASS中，嵌套类应该正确地处理它。|1920223|你可以在这里获得更多详细信息：https://stackoverflow.com/a/54672579/783364|1920224|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/54672579/783364^0|O|11|0|0|0|0|0|0|F|17|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|U|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

Since deep is deprecated. In my view the right way to do it is using <code>encapsulation: ViewEncapsulation.None</code>.

ex:

<pre><code>@Component({
 selector: '...',
 templateUrl: '...',
 styleUrls: ['...'],
 encapsulation: ViewEncapsulation.None,
})
</code></pre>

Then you just need to change the class

<pre><code>.mat-checkbox-background {
 background-color: green;
}
</code></pre>

You just need to be careful to deal with global css stuff. In SASS nested classes should handle it properly.

You can have more details here: <a href="https://stackoverflow.com/a/54672579/783364">https://stackoverflow.com/a/54672579/783364</a>

blocks|key|1920444|text|对我来说，有效的方法如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1920445|<mat-checkbox+class="tn-checkbox">Check+me!</mat-checkbox>|code-block|syntax|javascript|1920446|在css中(在我的例子中是sass)：|1920447|.#{$wf__ns}checkbox+{
++.mat-checkbox-ripple+{
++++.mat-ripple-element+{
++++++background:+$cool-blue+!important;
++++}
++}

++&.mat-checkbox-checked+{
++++.mat-checkbox-background+{
++++++background:+$cool-blue;
++++}
++++.mat-checkbox-ripple+{
++++++.mat-ripple-element+{
++++++++background:+$cool-blue+!important;
++++++}
++++}
++}
}|1920448|解释：|1920449|选中的背景颜色将更改为mat-checkbox-mat内的背景-checkbox-+checked。checkbox-checked---checkbox-+when|offset|length|style|BOLD|1920450|对于涟漪类，当您按下按钮时，材质将具有动画效果。这个类控制动画的颜色，如果你不改变它，它将保持不变(粉色)。|1920451|如果您不通过按下复选框来更改它，您将看到奇怪的粉红色效果。|1920452|其他答案对我不起作用，尽管我依靠第一个答案来开发它。|1920453|它可能来自我的angular版本，我在下面留下：|1920454|Angular+CLI:+8.3.25
Node:+13.3.0
Angular:+8.2.14|1920455|entityMap^0|0|0|0|0|0|1V|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|19|8|@$O|1A|P|1B|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|D|7|1G|8|@]|9|@]|A|$E|F]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

For me what has worked is the following:

<pre><code>&lt;mat-checkbox class="tn-checkbox"&gt;Check me!&lt;/mat-checkbox&gt;
</code></pre>

In the css (or in my case sass):

<pre><code>.#{$wf__ns}checkbox {
 .mat-checkbox-ripple {
 .mat-ripple-element {
 background: $cool-blue !important;
 }
 }

 &amp;.mat-checkbox-checked {
 .mat-checkbox-background {
 background: $cool-blue;
 }
 .mat-checkbox-ripple {
 .mat-ripple-element {
 background: $cool-blue !important;
 }
 }
 }
}
</code></pre>

Explanation: 

The checked background color is changed to mat-checkbox-background within mat-checkbox-checked. IF you want to modify the background color when it is not checked just copy that part and copy it outside of mat-checkbox-checked.

As for the ripple classes, it turns out that the material has an animation when you press the button. That class controls the color of the animation, if you don't change it it will remain the same (pink).

If you do not change it by pressing the checkbox you will see a strange pink effect.

The other answers do not work for me although I rely on the first to develop it.

It may be from my version of angular that I leave below:

<pre><code>Angular CLI: 8.3.25
Node: 13.3.0
Angular: 8.2.14
</code></pre>

blocks|key|4031230|text|在angular+9中，一组答案对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4031231|.mat-checkbox-checked.mat-accent+.mat-checkbox-ripple+.mat-ripple-element+{
++opacity:+0.03+!important;
++background-color:+#005691+!important;
}

.mat-checkbox-checked.mat-accent+.mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent+.mat-checkbox-background+{
++background-color:+#005691+!important;
}
.mat-checkbox-ripple+.mat-ripple-element,
.mat-checkbox-checked.mat-accent+.mat-checkbox-background+{
++background-color:+#005691+!important;
}|code-block|syntax|javascript|4031232|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

A combination of answers worked for me in angular 9
<pre><code>.mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
 opacity: 0.03 !important;
 background-color: #005691 !important;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
 background-color: #005691 !important;
}
.mat-checkbox-ripple .mat-ripple-element,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
 background-color: #005691 !important;
}
</code></pre>

blocks|key|4031282|text|你可以用这种方式改变边框的颜色。(角度)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4031283|::ng-deep+.mat-checkbox+{
++++.mat-checkbox-ripple+.mat-ripple-element+{
++++++++background-color:+#07abe9+!important;
++++}
++++.mat-checkbox-frame+{
++++++++border-color:+#07abe9+!important;
++++}
}|code-block|syntax|javascript|4031284|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can change the color of the border this way.(angular)
<pre><code>::ng-deep .mat-checkbox {
 .mat-checkbox-ripple .mat-ripple-element {
 background-color: #07abe9 !important;
 }
 .mat-checkbox-frame {
 border-color: #07abe9 !important;
 }
}
</code></pre>

blocks|key|4031384|text|这对我使用Angular+10：In+your+styles.scss很有效|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|4031385|//更改背景颜色|4031386|.mat-checkbox-checked.mat-accent+.mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent+.mat-checkbox-background+{
++background-color:+#1f45cc;
}|code-block|syntax|javascript|4031387|//更改勾选和未勾选案例的边框颜色|4031388|.mat-checkbox-frame+{
++border-color:+#1f45cc;
}|4031389|entityMap^0|5|A|O|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

This worked for me with Angular 10:
In your styles.scss:
//Change background color
<pre><code>.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
 background-color: #1f45cc;
}
</code></pre>
//Change the border color for both checked and unchecked cases
<pre><code>.mat-checkbox-frame {
 border-color: #1f45cc;
}
</code></pre>

blocks|key|1920372|text|.mat-checkbox-ripple+.mat-ripple-element,.mat-checkbox-checked.mat-accent+.mat-checkbox-background+{
++++++background-color:+$your-color!important;
}

.mat-checkbox-checked.mat-primary+.mat-checkbox-background,+.mat-checkbox-indeterminate.mat-primary+.mat-checkbox-background{
++++++background-color:+$your-color!important;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1920373|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>.mat-checkbox-ripple .mat-ripple-element,.mat-checkbox-checked.mat-accent .mat-checkbox-background {
 background-color: $your-color!important;
}

.mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background{
 background-color: $your-color!important;
}
</code></pre>

blocks|key|1920577|text|这就是有效的方法。在我们的JHIPSTER项目中，我们有一个global.scss。如果你有一个全局的，下面是你需要做的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1920578|1920579|用一个类包装您的组件html。例如：|ordered-list-item|1920580|1920581|​|1920582|<div+class="supplier-details-container">
++
</div>|code-block|syntax|javascript|1920583|1920584|1920585|Inglobal.scss+or+global.css像这样写你的css/scss|unordered-list-item|1920586|1920587|1920588|.supplier-details-container+.mat-checkbox-ripple+.mat-ripple-element,.mat-checkbox-checked.mat-accent+.mat-checkbox-background+{
++background-color:+red+!important;
}|1920589|1920590|基本上是使用css层次结构，用来包装组件html的组件类包装原生的角度材料css。|1920591|让我知道它是否有效。我们可以调试。|1920592|entityMap^0|U|B|0|0|0|0|0|0|0|0|2|B|H|A|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|1B|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]|$1|K|3|L|5|6|7|1D|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|1E|8|@]|D|@]|E|$P|Q]]|$1|R|3|L|5|6|7|1F|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]|$1|T|3|U|5|V|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]|$1|X|3|L|5|6|7|1N|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|O|7|1O|8|@]|D|@]|E|$P|Q]]|$1|10|3|L|5|6|7|1P|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|13|3|14|5|6|7|1R|8|@]|D|@]|E|$]]|$1|15|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|16|$]]

This is what works. On our JHIPSTER project, we have a <code>global.scss</code>. Here is what you need to do if you do have a global.
<ol>
<li>Wrap your component html with a class. Forexample:</li>
</ol>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="supplier-details-container"&gt;
 &lt;!-- rest of your html here --&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

<ol start="2">
<li>In the <code>global.scss</code> or <code>global.css</code> write your css/scss like so (<code>Im using red to test</code>):</li>
</ol>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.supplier-details-container .mat-checkbox-ripple .mat-ripple-element,.mat-checkbox-checked.mat-accent .mat-checkbox-background {
 background-color: red !important;
}</code></pre>
</div>
</div>

Basically using css hierarchy wrapping the native angular material css with your component class that you use to wrap your component html.
Let me know if it works or not. We can debug.

blocks|key|4030907|text|这个解决方案对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4030908|​|4030909|/deep/.mat-checkbox-checked.mat-accent+.mat-checkbox-background,+.mat-checkbox-indeterminate.mat-accent+.mat-checkbox-background+{
++++background-color:+#3490d3;
}|code-block|syntax|javascript|4030910|4030911|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

this solution works well for me 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>/deep/.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
 background-color: #3490d3;
}</code></pre>
</div>
</div>

I'm using checkbox of angular-material2. Currently the default color of checkbox is coming as purple color. 
Looks like they have changed default color of checkbox from "primary" to accent. 
Is there a way to get "primary"(green) color instead of purple without overriding css. 
I tried giving color="primary" to but that didn't worked. 

Code : <code>&lt;md-checkbox&gt;&lt;/md-checkbox&gt;</code> 

Import statement: 

<pre><code>import {MdCheckbox} from '@angular2-material/checkbox';
</code></pre>

Plunker <a href="http://plnkr.co/edit/sFC0kfdzj7fxtUC3GXdr?p=preview" rel="noreferrer">http://plnkr.co/edit/sFC0kfdzj7fxtUC3GXdr?p=preview</a>

angular-material change checkbox color

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我使用的是angular-material2 2的复选框。目前，checkbox的默认颜色是紫色。看起来他们已经将checkbox的默认颜色从“主色”改为“重音”。有没有办法在不覆盖css的情况下获得“原色”(绿色)而不是紫色。我尝试将color=设置为“primary”，但这不起作用。代码：<md-checkbox></md-checkbox>导入语句：import {MdCheckbox} f

问角度-材料更改复选框颜色
EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度-材料更改复选框颜色EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度-材料更改复选框颜色
EN