diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 4564ab1f1764..6c825a685cf4 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -241,7 +241,7 @@ md-checkbox {
   width: $md-checkbox-size;
 
   [dir="rtl"] & {
-    margin:{
+    margin: {
       left: $md-checkbox-item-spacing;
       right: auto;
     }
@@ -265,9 +265,7 @@ md-checkbox {
 .md-checkbox-background {
   @extend %md-checkbox-outer-box;
 
-  align-items: center;
-  background-color: $md-checkbox-background-color;
-  opacity: 0;
+  align-items: center;    
   display: inline-flex;
   justify-content: center;
   transition: background-color $md-checkbox-transition-duration
@@ -333,15 +331,15 @@ md-checkbox {
   .md-checkbox-mixedmark {
     transform: scaleX(1) rotate(-45deg);
   }
-
+  
   .md-checkbox-background {
-    opacity: 1;
+    background-color: $md-checkbox-background-color;
   }
 }
 
 .md-checkbox-indeterminate {
   .md-checkbox-background {
-    opacity: 1;
+    background-color: $md-checkbox-background-color;
   }
 
   .md-checkbox-checkmark {
@@ -359,6 +357,13 @@ md-checkbox {
   }
 }
 
+
+.md-checkbox-unchecked {
+  .md-checkbox-background {
+    background-color: transparent; 
+  }
+}
+
 .md-checkbox-disabled {
   // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
   // this does not work well with elements layered on top of one another. To get around this we