Only override input border-radius as part of .form-control to avoid bug with iOS Safari (alt fix for #20247) (#20695)

1 files changed, 9 insertions, 1 deletions

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 6ea5d3dbc..59465ee6c 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -18,8 +18,16 @@
   background-image: none;
   background-clip: padding-box;
   border: $input-btn-border-width solid $input-border-color;
+
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @include border-radius($input-border-radius);
+  @if $enable-rounded {
+    // Manually use the if/else instead of the mixin to account for iOS override
+    border-radius: $input-border-radius;
+  } @else {
+    // Otherwise undo the iOS default
+    border-radius: 0;
+  }
+
   @include box-shadow($input-box-shadow);
   @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);