Use the same font on the button as on the field itself

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index e144c9bf7c55e7ce7eaee2fdd913a4de0ef983b9..35d5bbd992ea06aa6eb0ef779f52e599e6acb9aa 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -575,7 +575,15 @@ legend {
   padding: 0;
 }
 
-// 1. Change font properties to `inherit` in Safari.
+
+// Inherit font family and line height for file input buttons
+
+// stylelint-disable-next-line selector-pseudo-element-no-unknown
+::file-selector-button {
+  font: inherit;
+}
+
+// 1. Change font properties to `inherit`
 // 2. Correct the inability to style clickable types in iOS and Safari.
 
 ::-webkit-file-upload-button {

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 93c0e604212391ffbec837dd88841a076a61e7ae..4f0f0a031e6340aebb2ca9e95f185fa925f05449 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -72,7 +72,6 @@
     margin: (-$input-padding-y) (-$input-padding-x);
     margin-inline-end: $input-padding-x;
     -moz-margin-end: subtract($input-padding-x, 5px); // stylelint-disable-line property-no-vendor-prefix
-    line-height: inherit;
     color: $form-file-button-color;
     @include gradient-bg($form-file-button-bg);
     pointer-events: none;
@@ -93,7 +92,6 @@
     padding: $input-padding-y $input-padding-x;
     margin: (-$input-padding-y) (-$input-padding-x);
     margin-inline-end: $input-padding-x;
-    line-height: inherit;
     color: $form-file-button-color;
     @include gradient-bg($form-file-button-bg);
     pointer-events: none;