Use :user-invalid instead of :invalid for form field styling (#9025)

* Use :user-invalid instead of :invalid for form field styling

Every theme styled required inputs and selects with :invalid, which
matches as soon as an empty required field renders, before the user
has even touched it. This made fields such as the username on the
"Add user" admin form show a red border on first load, with nothing
wrong yet.

Switch to :user-invalid, which only matches after the user has
interacted with the field (e.g. on blur or submit), so a field only
turns red once it is actually flagged as invalid by the user's own
input. Browser support for :user-invalid is now good enough across
evergreen browsers (~89%, per caniuse) for this to be safe, which
was the blocker that stopped a previous attempt at this fix in #3724.

Fixes #3647

* CSS: support legacy Gecko invalid styles

* Drop legacy -moz-ui-invalid
Not important enough

---------

Co-authored-by: Gerard Alvear <gerard.alvear@logiqd.me>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

p/themes/Ansum/_forms.css

@@ -94,7 +94,7 @@ input:focus, select:focus, textarea:focus {
 	border-color: var(--main-first);
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 	color: var(--alert-bg);
 	border-color: var(--alert-bg);
 	box-shadow: none;

p/themes/Ansum/_forms.rtl.css

@@ -94,7 +94,7 @@ input:focus, select:focus, textarea:focus {
 	border-color: var(--main-first);
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 	color: var(--alert-bg);
 	border-color: var(--alert-bg);
 	box-shadow: none;

p/themes/Flat/flat.css

@@ -54,7 +54,7 @@ input:focus, select:focus, textarea:focus {
 	border-color: #2980b9;
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 	color: #f00;
 	border-color: #f00;
 	box-shadow: none;

p/themes/Flat/flat.rtl.css

@@ -54,7 +54,7 @@ input:focus, select:focus, textarea:focus {
 	border-color: #2980b9;
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 	color: #f00;
 	border-color: #f00;
 	box-shadow: none;

p/themes/Mapco/_forms.css

@@ -94,7 +94,7 @@ input:focus, select:focus, textarea:focus {
 	border-color: var(--main-first);
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 	color: var(--alert-bg);
 	border-color: var(--alert-bg);
 	box-shadow: none;

p/themes/Mapco/_forms.rtl.css

@@ -94,7 +94,7 @@ input:focus, select:focus, textarea:focus {
 	border-color: var(--main-first);
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 	color: var(--alert-bg);
 	border-color: var(--alert-bg);
 	box-shadow: none;

p/themes/Nord/nord.css

@@ -133,9 +133,9 @@ input, select, textarea {
 	line-height: 1;
 }
 
-input:invalid,
-select:invalid,
-textarea:invalid {
+input:user-invalid,
+select:user-invalid,
+textarea:user-invalid {
 	border-color: var(--red);
 }
 

p/themes/Nord/nord.rtl.css

@@ -133,9 +133,9 @@ input, select, textarea {
 	line-height: 1;
 }
 
-input:invalid,
-select:invalid,
-textarea:invalid {
+input:user-invalid,
+select:user-invalid,
+textarea:user-invalid {
 	border-color: var(--red);
 }
 

p/themes/Origine/origine.css

@@ -138,7 +138,7 @@ input:focus, select:focus, textarea:focus, input[type="password"]:focus + .toggl
 	outline: none;
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 	border-color: var(--form-element-border-color-invalid);
 	box-shadow: 0 0 2px 2px var(--form-element-invalid-box-shadow-color-inset) inset;
 }

p/themes/Origine/origine.rtl.css

@@ -138,7 +138,7 @@ input:focus, select:focus, textarea:focus, input[type="password"]:focus + .toggl
 	outline: none;
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 	border-color: var(--form-element-border-color-invalid);
 	box-shadow: 0 0 2px 2px var(--form-element-invalid-box-shadow-color-inset) inset;
 }

p/themes/Pafat/pafat.css

@@ -129,7 +129,7 @@ input:focus, select:focus, textarea:focus {
 	border-color: var(--border-color-grey-dark);
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 	border-color: var(--invalid-box-border-color);
 	box-shadow: 0 0 2px 2px var(--invalid-box-shadow-color) inset;
 }

p/themes/Pafat/pafat.rtl.css

@@ -129,7 +129,7 @@ input:focus, select:focus, textarea:focus {
 	border-color: var(--border-color-grey-dark);
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 	border-color: var(--invalid-box-border-color);
 	box-shadow: 0 0 2px 2px var(--invalid-box-shadow-color) inset;
 }

p/themes/Swage/swage.css

@@ -170,7 +170,7 @@ label {
 		outline: none;
 	}
 
-	&:invalid {
+	&:user-invalid {
 		padding-left: 5px;
 		color: var(--color-text-bad);
 		border-left-color: var(--color-border-bad);

p/themes/Swage/swage.rtl.css

@@ -170,7 +170,7 @@ label {
 		outline: none;
 	}
 
-	&:invalid {
+	&:user-invalid {
 		padding-right: 5px;
 		color: var(--color-text-bad);
 		border-right-color: var(--color-border-bad);

p/themes/base-theme/base.css

@@ -39,7 +39,7 @@ option {
 input:focus, select:focus, textarea:focus {
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 }
 
 input:disabled, select:disabled {

p/themes/base-theme/base.rtl.css

@@ -39,7 +39,7 @@ option {
 input:focus, select:focus, textarea:focus {
 }
 
-input:invalid, select:invalid {
+input:user-invalid, select:user-invalid {
 }
 
 input:disabled, select:disabled {

p/themes/base-theme/frss.css

@@ -373,7 +373,7 @@ textarea[rows="2"] {
 	height: 4em;
 }
 
-textarea:invalid {
+textarea:user-invalid {
 	border: 2px dashed var(--frss-border-color-error);
 }
 

p/themes/base-theme/frss.rtl.css

@@ -373,7 +373,7 @@ textarea[rows="2"] {
 	height: 4em;
 }
 
-textarea:invalid {
+textarea:user-invalid {
 	border: 2px dashed var(--frss-border-color-error);
 }