diff --git a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
index 269e269be8..841e22f855 100644
--- a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
@@ -24,7 +24,9 @@ function MainController($scope, $location, appState, treeService, notificationsS
     // For more information about this approach, see https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
     function handleFirstTab(evt) {
         if (evt.keyCode === 9) {
+            console.log("handleFirstTab")
             $scope.tabbingActive = true;
+            $scope.$digest();
             window.removeEventListener('keydown', handleFirstTab);
             window.addEventListener('mousedown', disableTabbingActive);
         }
@@ -32,6 +34,8 @@ function MainController($scope, $location, appState, treeService, notificationsS
     
     function disableTabbingActive(evt) {
         $scope.tabbingActive = false;
+        $scope.$digest();
+            console.log("disableTabbingActive")
         window.removeEventListener('mousedown', disableTabbingActive);
         window.addEventListener("keydown", handleFirstTab);
     }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
index 4446ead255..32edb8c850 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
@@ -30,23 +30,13 @@
         }
         &:checked ~ .umb-form-check__state .umb-form-check__check {
             border-color: @ui-option-type;
-            background-color: @ui-option-type;
         }
         &:checked:hover ~ .umb-form-check__state .umb-form-check__check {
             &::before {
                 background: @ui-option-type-hover;
             }
         }
-
-        &:focus:checked ~ .umb-form-check .umb-form-check__check,
-        &:focus ~ .umb-form-check__state .umb-form-check__check {
-            border-color: @inputBorderFocus;
-            
-            .tabbing-active & {
-                outline: 2px solid @inputBorderTabFocus;
-            }
-        }
-
+        
         &:checked ~ .umb-form-check__state {
             .umb-form-check__check {
                 // This only happens if the state has a radiobutton modifier
@@ -72,6 +62,17 @@
             }
         }
     }
+    
+    
+    .tabbing-active &.umb-form-check--radiobutton &__input:focus ~ .umb-form-check__state .umb-form-check__check {
+        //outline: 2px solid @inputBorderTabFocus;
+        border: 2px solid @inputBorderTabFocus;
+        margin: -1px;
+    }
+    .tabbing-active &.umb-form-check--checkbox &__input:focus ~ .umb-form-check__state .umb-form-check__check {
+        outline: 2px solid @inputBorderTabFocus;
+        border-color: white;
+    }
 
     &__state {
         display: flex;