Center the dropdown icon added to an input with a paired datalist in Chrome

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Track source locations through `@plugin` and `@config` ([#18345](https://github.com/tailwindlabs/tailwindcss/pull/18345))
 - Handle when `process.env.DEBUG` is a boolean in `@tailwindcss/node` ([#18485](https://github.com/tailwindlabs/tailwindcss/pull/18485))
 - Ignore consecutive semicolons in the CSS parser ([#18532](https://github.com/tailwindlabs/tailwindcss/pull/18532))
+- Center the dropdown icon added to an input with a paired datalist ([#18511](https://github.com/tailwindlabs/tailwindcss/pull/18511))
 
 ## [4.1.11] - 2025-06-26
 

integrations/cli/index.test.ts

@@ -1924,6 +1924,9 @@ test(
         ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
           padding-block: 0;
         }
+        ::-webkit-calendar-picker-indicator {
+          line-height: 1;
+        }
         :-moz-ui-invalid {
           box-shadow: none;
         }

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -240,6 +240,10 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     padding-block: 0;
   }
 
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
   :-moz-ui-invalid {
     box-shadow: none;
   }

packages/tailwindcss/preflight.css

@@ -349,6 +349,14 @@ textarea {
   padding-block: 0;
 }
 
+/*
+  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1;
+}
+
 /*
   Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -354,6 +354,10 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
     padding-block: 0;
   }
 
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
   :-moz-ui-invalid {
     box-shadow: none;
   }

packages/tailwindcss/src/source-maps/source-map.test.ts

@@ -279,17 +279,19 @@ test('source maps trace back to @import location', async ({ expect }) => {
     'preflight.css: 139:4-14 <- 337:2-12',
     'preflight.css: 141:2-329 <- 340:0-348:39',
     'preflight.css: 142:4-20 <- 349:2-18',
-    'preflight.css: 144:2-19 <- 356:0-17',
-    'preflight.css: 145:4-20 <- 357:2-18',
-    'preflight.css: 147:2-96 <- 364:0-366:23',
-    'preflight.css: 148:4-22 <- 367:2-20',
-    'preflight.css: 150:2-59 <- 374:0-375:28',
-    'preflight.css: 151:4-16 <- 376:2-14',
-    'preflight.css: 153:2-47 <- 383:0-45',
-    'preflight.css: 154:4-28 <- 384:2-26',
-    'index.css: 157:0-16 <- 5:0-42',
-    'input.css: 158:0-5 <- 3:0-5',
-    'input.css: 159:2-33 <- 4:9-18',
+    'preflight.css: 144:2-38 <- 356:0-36',
+    'preflight.css: 145:4-18 <- 357:2-16',
+    'preflight.css: 147:2-19 <- 364:0-17',
+    'preflight.css: 148:4-20 <- 365:2-18',
+    'preflight.css: 150:2-96 <- 372:0-374:23',
+    'preflight.css: 151:4-22 <- 375:2-20',
+    'preflight.css: 153:2-59 <- 382:0-383:28',
+    'preflight.css: 154:4-16 <- 384:2-14',
+    'preflight.css: 156:2-47 <- 391:0-45',
+    'preflight.css: 157:4-28 <- 392:2-26',
+    'index.css: 160:0-16 <- 5:0-42',
+    'input.css: 161:0-5 <- 3:0-5',
+    'input.css: 162:2-33 <- 4:9-18',
   ])
 })