refs #15181 adjust css for required input which is empty:

* draw red border only when input has focus

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;

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