Fix position of browser default validation message (#28852)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 86edabaa16b174dd44d8075dc5ad37bb2a0666c3..1f1b5da4e3e55d24bca70c6d2b1f8d3d6028e0c2 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -21,7 +21,10 @@
 
 .custom-control-input {
   position: absolute;
+  left: 0;
   z-index: -1; // Put the input behind the label so it doesn't overlay text
+  width: $custom-control-indicator-size;
+  height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
   opacity: 0;
 
   &:checked ~ .custom-control-label::before {