diff --git a/static/styles/components.scss b/static/styles/components.scss
index 4e22a83c2d..baa3746963 100644
--- a/static/styles/components.scss
+++ b/static/styles/components.scss
@@ -8,7 +8,8 @@
         vertical-align: top;
 
         input[type=checkbox] {
-            display: none;
+            position: absolute;
+            clip: rect(0, 0, 0, 0);
 
             ~ span {
                 display: inline-block;
@@ -26,7 +27,6 @@
                 font-size: 1.3rem;
                 text-align: center;
                 border: 1px solid hsla(0, 0%, 0%, 0.6);
-                color: hsl(0, 0%, 80%);
 
                 border-radius: 4px;
                 -webkit-filter: brightness(0.80);
@@ -35,14 +35,17 @@
             }
 
             &:checked ~ span {
-                color: transparent;
-
                 background-image: url(/static/images/checkbox.svg);
                 background-size: 85%;
                 background-position: 50% 50%;
                 background-repeat: no-repeat;
             }
 
+            &:focus ~ span {
+                outline: 1px dotted;
+                outline: -webkit-focus-ring-color auto 5px;
+            }
+
             &:disabled ~ span {
                 opacity: 0.50;
                 cursor: default;