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

twbs · Oct 28, 2020 · b1c7d1d · b1c7d1d
1 parent b2be299
commit b1c7d1d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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;