How to change the border color of the empty (un-checked) check box in Materialize

I've found instructions on change the color of the actual check mark when it's checked, but I'm trying to figure out how to change the color of the box.

I'm placing the box on a darker background, and it's hard to see, so I'd like to make it lighter.

I've tried the normal color class concepts that most of the other elements observe in Materialize, but the empty checkbox border doesn't seem to follow it.

<span class="card-title">
    <input type="checkBox" id="{{_id}}" class="checkbox  selectFromWeb white"  />
    <label for="{{_id}}"></label>{{name.first}}
</span>

Solution

You can add custom style on your custom style sheet to over right Materialize, in your case you can use.

[type="checkbox"].filled-in:not(:checked)+label:after{
  border: 2px solid #da4d4d;
}

Use the colour you need and only if it's not overwriting your the materialize style then use !important

[type="checkbox"].filled-in:not(:checked)+label:after{
  border: 2px solid #da4d4d !important;
}

A working sample for you. Hope this was helpful.

[type="checkbox"].filled-in:not(:checked)+label:after {
  border: 2px solid #da4d4d !important;
}

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">

<p>
  <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
  <label for="filled-in-box">Checked</label>
</p>
<p>
  <input type="checkbox" class="filled-in" id="filled-in-box2" />
  <label for="filled-in-box2">Unchecked</label>
</p>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>