Backport #30353 (#30361)

Remove appearance from date inputs

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_forms.scss b/scss/_forms.scss
index b2edb7b27bcbfa9685c2549d2c0b9ddb06eb80c1..66a4efe1d47524a85c1cfbf139f683f72859c8b0 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -59,6 +59,15 @@
   }
 }
 
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  &.form-control {
+    appearance: none; // Fix appearance for date inputs in Safari
+  }
+}
+
 select.form-control {
   &:focus::-ms-value {
     // Suppress the nested default white text on blue background highlight given to

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index b6c98ccd775fda35953e4ea77da43cdda67be4f3..e9b5a7edddd99c02b25d29ad2ee3e4c54fa0966d 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -376,18 +376,6 @@ input[type="checkbox"] {
 }
 
 
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-  // Remove the default appearance of temporal inputs to avoid a Mobile Safari
-  // bug where setting a custom line-height prevents text from being vertically
-  // centered within the input.
-  // See https://bugs.webkit.org/show_bug.cgi?id=139848
-  // and https://github.com/twbs/bootstrap/issues/11266
-  -webkit-appearance: listbox;
-}
-
 textarea {
   overflow: auto; // Remove the default vertical scrollbar in IE.
   // Textareas should really only resize vertically so they don't break their (horizontal) containers.