diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss
index c3c5503d22532552f756116b32aaccd8a64e57cf..10b824ffaa5b9b4009d8a59ddca5eb403e22599e 100644
--- a/themes/finc/scss/_customVariables.scss
+++ b/themes/finc/scss/_customVariables.scss
@@ -23,6 +23,7 @@ $line-height-base: 1.5 !default;
 $brand-primary: #1779ba !default;
 $brand-secondary: #e7e7e7 !default;
 $brand-danger: #cc4b37 !default; // darker red = #a94442
+$brand-danger-transparent: transparentize($brand-danger, .1) !default; // used e.g. for invalid form fields
 $brand-info: #008cba !default;
 $brand-success: #43ac6a !default; // darker green = #3c763d
 $brand-warning: #f08a24 !default;
diff --git a/themes/finc/scss/compiled.scss b/themes/finc/scss/compiled.scss
index e08c6f042e4fb9ae0951e860295b1f6ecb240f75..f46adc1cd27fcdf62b82b0957e925cd63c49267f 100644
--- a/themes/finc/scss/compiled.scss
+++ b/themes/finc/scss/compiled.scss
@@ -277,11 +277,28 @@ input[type='text'] {
 }
 
 // red-bordered input field, when empty, requires "form" for specifity, CK
+
 form {
-  textarea:invalid,
-  input:invalid {
+  // create enough space for red border
+  input:invalid,
+  textarea:invalid {
     margin-right: 2px;
   }
+
+  input {
+    // show red border only when submitted empty or when in focus
+    &:invalid {
+      box-shadow: inherit;
+    }
+
+    &:focus {
+      &:invalid,
+      &:required:invalid {
+        border-color: $brand-danger-transparent;
+        box-shadow: 0 0 2px 1px $brand-danger-transparent;
+      }
+    }
+  }
 }
 
 //// Select - for limit and sort-select widths see below