diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 852bb5234..57a2b32f3 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -222,6 +222,17 @@ jQuery.event.special.remove = {
   }
 };
 
+// checkbox-replacement helper
+// native checkbox focus behaviour is the following:
+// tab to checkbox: :focus state and focus outline
+// click on checkbox: :focus state but no focus outline
+$('body').on('click', '.checkbox-replacement, .radio-replacement', function(event){ 
+  $(event.currentTarget).find('input').addClass('is-active')
+});
+$('body').on('blur', '.checkbox-replacement input, .radio-replacement input', function(){ 
+  $(this).removeClass('is-active')
+});
+
 // start application
 jQuery(function(){
   new App.Run();
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 1b6d6a48c..52216f0c7 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -993,10 +993,10 @@ th.align-right {
   display: none;
 }
 
-.checkbox-replacement input:focus ~ .icon-checked,
-.checkbox-replacement input:focus ~ .icon-unchecked,
-.radio-replacement input:focus ~ .icon-checked,
-.radio-replacement input:focus ~ .icon-unchecked, {
+.checkbox-replacement input:focus:not(.is-active) ~ .icon-checked,
+.checkbox-replacement input:focus:not(.is-active) ~ .icon-unchecked,
+.radio-replacement input:focus:not(.is-active) ~ .icon-checked,
+.radio-replacement input:focus:not(.is-active) ~ .icon-unchecked, {
   box-shadow: 0 0 0 2px hsl(201,62%,90%);
   color: hsl(200,71%,59%);
 }