Bring back webkit calendar picker indicator for datalists (#35406)

* Bring back webkit calendar picker indicator for datalists

* Replace webkit datalist indicator with Bootstrap Icons

* Use default datalist icons on date or time inputs in Chrome
Remove the dropdown arrow from text type inputs

* Bundlewatch

Co-authored-by: Mark Otto <markdotto@gmail.com>

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index a4c84cfc5d6147134aa70210adfd59ada6473c8f..94f1e4139773995b41f2b53c9c68631d24c1c85b 100644 (file)
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "25.7 kB"
+      "maxSize": "25.75 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 81884c7195d758c7fc76fca2b6e128cad6f4f4cb..ed422f7538c710d7783d32eedf2d92f8c1008240 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -438,11 +438,11 @@ select {
   }
 }
 
-// Remove the dropdown arrow in Chrome from inputs built with datalists.
+// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
 // See https://stackoverflow.com/a/54997118
 
-[list]::-webkit-calendar-picker-indicator {
-  display: none;
+[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
+  display: none !important;
 }
 
 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`