Merge pull request #2201 from alphagov/file-upload-safari

Set `-webkit-appearance: button` on file upload so text is aligned in Safari

CHANGELOG.md

@@ -19,6 +19,7 @@ This was added in [pull request #2164: Enable cookie banner to set link styled a
 - [#2171: Fix padding on GOV.UK logo affecting hover and focus states](https://github.com/alphagov/govuk-frontend/pull/2171)
 - [#2186: Fix display of warning text in Edge when Windows High Contrast Mode is enabled](https://github.com/alphagov/govuk-frontend/pull/2186)
 - [#2192: Add data-nosnippet to prevent cookie banner text appearing in Google Search snippets](https://github.com/alphagov/govuk-frontend/pull/2192)
+- [#2201: Set -webkit-appearance: button on file upload so text is aligned in Safari](https://github.com/alphagov/govuk-frontend/pull/2201)
 
 ## 3.11.0 (Feature release)
 

src/govuk/components/file-upload/_index.scss

@@ -11,6 +11,17 @@
     padding-top: $component-padding;
     padding-bottom: $component-padding;
 
+    // The default file upload button in Safari does not
+    // support setting a custom font-size. Set `-webkit-appearance`
+    // to `button` to drop out of the native appearance so the
+    // font-size is set to 19px
+    // https://bugs.webkit.org/show_bug.cgi?id=224746
+    &::-webkit-file-upload-button {
+      -webkit-appearance: button;
+      color: inherit;
+      font: inherit;
+    }
+
     &:focus {
       // "Yank" the padding with negative margin to avoid a jump
       // when element is focused