entityMap|blocks|key|8i5a6|text|对于角度材质7，适用于轮廓颜色和内部填充颜色|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2pohm|::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^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

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>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://material.angular.io/components/checkbox/overview#theming|blocks|key|8g3at|text|如果你正在使用主题，你不需要添加css，只需添加属性颜色到|unstyled|depth|inlineStyleRanges|entityRanges|2vs7m|Primary|offset|length|style|CODE|48uqc|可以使用color属性更改的颜色。默认情况下，复选框使用主题的强调颜色。可以将其更改为'primary‘或'warn’|4vkbu|角度[Checkbox+%7C+Angular+Material](https://material.angular.io/components/checkbox/overview#theming)+|UNDERLINE|9qrv^0|0|0|7|0|0|3|R|3|R|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|U|G|@]|H|@]|6|$]]|$A|I|C|J|2|E|F|V|G|@$K|W|L|X|M|N]]|H|@]|6|$]]|$A|O|C|P|2|E|F|Y|G|@]|H|@]|6|$]]|$A|Q|C|R|2|E|F|Z|G|@$K|10|L|11|M|S]]|H|@$K|12|L|13|A|14]]|6|$]]|$A|T|C|-4|2|E|F|15|G|@]|H|@]|6|$]]]]

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>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors|blocks|key|3i523|text|其中一个standard实现这一点的方法是利用/deep/+selector|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|9grem|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|1l3b9|这将允许您覆盖启用了Shadow+Dom的组件中的样式。^0|4|8|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|R|G|@]|H|@$I|S|J|T|A|U]]|6|$]]|$A|K|C|L|2|M|F|V|G|@]|H|@]|6|$N|O]]|$A|P|C|Q|2|E|F|W|G|@]|H|@]|6|$]]]]

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.

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

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>

entityMap|blocks|key|c339b|text|默认颜色取决于您选择的主题@import..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|cbvks|但angular材质也提供了定制主题或定制组件的方法，如更改复选框..。|ehka5|具体步骤如下：|4upul|1.)导入_theming.scss文件|d90jo|@import+"../node_modules/@angular/material/theming";|code-block|syntax|js|489ar|2.)指定重音颜色，即您想要应用的复选框的颜色，如下所示:-|bktit|//+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);|javascript|443mm|希望能有所帮助。^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|U|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|V|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|W|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|X|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|Y|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|7|8|Z|9|@]|A|@]|B|$]]|$2|P|4|Q|6|K|8|10|9|@]|A|@]|B|$L|R]]|$2|S|4|T|6|7|8|11|9|@]|A|@]|B|$]]]]

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.

entityMap|blocks|key|dvn3a|text|Angular+7%2B|type|unstyled|depth|inlineStyleRanges|entityRanges|data|en8vq|这将适用于checkbox以及初始的波纹颜色。如果只更改复选框的背景，初始的波纹颜色不会更新。这就解决了问题。|2o0u3|SCSS：|19vf|::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^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|N|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|O|9|@]|A|@]|B|$J|K]]]]

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>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://github.com/angular/material2/commit/7ac29f8afa3b8b47a138bfffa3c59059b4f8f7c6|blocks|key|ciif1|text|对于beta.2的角度材料，color属性应该起作用。|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|9vubu|在beta.2之前，它有一些问题。2|bso6m|请参阅commit解决了这个问题。^0|E|5|0|0|3|6|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|Q|G|@$H|R|I|S|J|K]]|L|@]|6|$]]|$A|M|C|N|2|E|F|T|G|@]|L|@]|6|$]]|$A|O|C|P|2|E|F|U|G|@]|L|@$H|V|I|W|A|X]]|6|$]]]]

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>

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

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>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://material.angularjs.org/latest/CSS/checkbox|blocks|key|foifr|text|这应考虑到默认复选框颜色|unstyled|depth|inlineStyleRanges|entityRanges|4fqpv|md-checkbox+.md-icon+{
++++background:+green;
}
md-checkbox.md-default-theme.md-checked+.md-icon+{
++++background:+green;
}|code-block|syntax|javascript|f7qab|点击此处阅读更多信息角度材料Documentation](https://material.angularjs.org/latest/CSS/checkbox)+[|offset|length|73mc4|f8ug^0|0|0|A|H|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|T|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|U|G|@]|H|@]|6|$L|M]]|$A|N|C|O|2|E|F|V|G|@]|H|@$P|W|Q|X|A|Y]]|6|$]]|$A|R|C|-4|2|E|F|Z|G|@]|H|@]|6|$]]|$A|S|C|-4|2|E|F|10|G|@]|H|@]|6|$]]]]

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>

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

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>

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

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>

entityMap|blocks|key|mgac|text|对我来说，有效的方法如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|bil5k|Check+me!|code-block|syntax|js|i9sp|在css中(在我的例子中是sass)：|89ni0|.#{$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;
++++++}
++++}
++}
}|javascript|bbqjc|解释：|25vtj|选中的背景颜色将更改为mat-checkbox-mat内的背景-checkbox-+checked。如果要在未选中的情况下修改背景色只需复制该部分并将其复制到mat之外-复选框-选中。|aapqq|至于波纹类，当您按下按钮时，会发现材质具有动画效果。这个类控制动画的颜色，如果你不改变它，它将保持不变(粉色)。|8g5lo|如果您不通过按下复选框来更改它，您将看到奇怪的粉红色效果。|bfbmd|其他答案对我不起作用，尽管我依靠第一个答案来开发它。|9olp6|它可能来自我的angular版本，我在下面留下：|79qoc|Angular+CLI:+8.3.25
Node:+13.3.0
Angular:+8.2.14^0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|10|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|11|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|12|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|13|9|@]|A|@]|B|$F|L]]|$2|M|4|N|6|7|8|14|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|15|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|16|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|17|9|@]|A|@]|B|$]]|$2|U|4|V|6|7|8|18|9|@]|A|@]|B|$]]|$2|W|4|X|6|7|8|19|9|@]|A|@]|B|$]]|$2|Y|4|Z|6|E|8|1A|9|@]|A|@]|B|$F|L]]]]

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>

entityMap|blocks|key|acf3|text|在angular+9中，一组答案对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168mq|.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^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

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>

entityMap|blocks|key|7hri8|text|你可以这样改变边框的颜色。(角度)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|22vcl|::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^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

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>

entityMap|blocks|key|232kh|text|这对我来说很有效角度10：在您的styles.scss|type|unstyled|depth|inlineStyleRanges|entityRanges|data|92nva|//更改背景颜色|2dsed|.mat-checkbox-checked.mat-accent+.mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent+.mat-checkbox-background+{
++background-color:+#1f45cc;
}|code-block|syntax|javascript|62nk7|//更改勾选和未勾选案例的边框颜色|8ccg1|.mat-checkbox-frame+{
++border-color:+#1f45cc;
}^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|P|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|Q|9|@]|A|@]|B|$]]|$2|L|4|M|6|G|8|R|9|@]|A|@]|B|$H|I]]]]

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>

entityMap|blocks|key|e3tjl|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^0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$C|D]]]]

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

entityMap|blocks|key|fm3j8|text|这就是有效的方法。在我们的JHIPSTER项目中，我们有一个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|eihhg|global.scss..。如果你有一个全局的，下面是你需要做的。|offset|length|style|CODE|do0e1|用类包装您的组件html。例如：|b13f|​|a6nbd|​在global.scss或者global.css像这样编写css/scss+(Im+using+red+to+test)：|be2ma|anhih|.supplier-details-container+.mat-checkbox-ripple+.mat-ripple-element,.mat-checkbox-checked.mat-accent+.mat-checkbox-background+{
++background-color:+red+!important;
}|code-block|syntax|javascript|2fv1v|6mnc7|基本上是使用css层次结构，用来包装组件html的组件类包装原生的角度材料css。|6eipp|让我知道它是否有效。我们可以调试。^0|0|0|B|0|0|0|2|B|F|A|14|K|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Z|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|10|9|@$E|11|F|12|G|H]]|A|@]|B|$]]|$2|I|4|J|6|7|8|13|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|14|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|15|9|@$E|16|F|17|G|H]|$E|18|F|19|G|H]|$E|1A|F|1B|G|H]]|A|@]|B|$]]|$2|O|4|L|6|7|8|1C|9|@]|A|@]|B|$]]|$2|P|4|Q|6|R|8|1D|9|@]|A|@]|B|$S|T]]|$2|U|4|L|6|7|8|1E|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|1F|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|1G|9|@]|A|@]|B|$]]]]

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.

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

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

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

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

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

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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