fix(form-field): unable to tap on certain types of inputs on iOS (#8543)

Fixes an issue that caused certain input types to collapse into 1px tall strips, preventing users from being to tap on them on iOS.

Fixes #8001.

Author: crisbeto

src/lib/input/input.scss

@@ -37,6 +37,22 @@
     display: none;
   }
 
+  // Fixes an issue on iOS where the following input types will collapse to 1px,
+  // if they're empty, because we've overridden their background color.
+  // See: https://stackoverflow.com/questions/18381594/input-type-date-appearance-in-safari-on-ios
+  &[type='date'],
+  &[type='datetime'],
+  &[type='datetime-local'],
+  &[type='month'],
+  &[type='week'],
+  &[type='time'] {
+    &::after {
+      content: ' ';
+      white-space: pre;
+      width: 1px;
+    }
+  }
+
   @include input-placeholder {
     // Delay the transition until the label has animated about a third of the way through, in
     // order to prevent the placeholder from overlapping for a split second.