Checkbox border color styling in Angular material (md-checkbox)

Question

I am just wondering if there is any way to style md-checkbox like given below:

Note: I just wanna change the border color of the checkbox.

I have tried following way but didn't succeed :

SCSS

$dal-green: #45ba8e;
    .check{
    md-checkbox {
      border: 2px solid $dal-green; 
    }
    }

HTML :

     <div class="check"> 
<md-checkbox></md-checkbox>
</div>

I have searched online but no luck . If any body can give css to override the border color it would be great help. Thanks In advance.

it seems <md-checkbox> creates <div class='md-icon' /> which defaults to an unchecked box area. Try applying css to this .md-icon I learnt it from here, github.com/angular/material/issues/2832 (the last comment) — Sudhansu Choudhary
– Sudhansu Choudhary, Commented Jun 23, 2015 at 20:15

Sudhansu Choudhary · Accepted Answer · 2015-06-23 19:42:32Z

2

Try this,

.check{
md-checkbox {
  border: 2px solid #009688; 
}
}

answered Jun 23, 2015 at 19:42

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2936008 Over a year ago

Its not working color is not a problem here assigning color to the border of the checkbox.

Sudhansu Choudhary Over a year ago

it seems <md-checkbox> creates <div class='md-icon' /> which defaults to an unchecked box area. Try applying css to this .md-icon I learnt it from here, github.com/angular/material/issues/2832 (the last comment)

Ellone · Accepted Answer · 2015-09-03 13:42:28Z

0

Try something like this :

md-checkbox .md-icon {
  border-color: green;
}

answered Sep 3, 2015 at 13:42

Ellone

3,92812 gold badges50 silver badges77 bronze badges

Comments

Stav Bodik · Accepted Answer · 2016-05-23 13:08:48Z

0

in new version you should use with underscore _md-icon:

        md-checkbox.md-checked ._md-icon {
         background-color: transparent;
        }


        md-checkbox ._md-icon {
        border-color: white;
        }

answered May 23, 2016 at 13:08

Stav Bodik

2,1443 gold badges20 silver badges26 bronze badges

Collectives™ on Stack Overflow

Checkbox border color styling in Angular material (md-checkbox)

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related