Center the dropdown icon added to an input with a paired datalist in Chrome (#18511)

This PR tweaks the dropdown arrow added to an input by Chrome when it
has a `list` attribute pointing to a `<datalist>`.

Right now the arrow isn't centered vertically:

<img width="227" height="58" alt="Screenshot 2025-07-14 at 15 41 50"
src="https://github.com/user-attachments/assets/b354a5e8-432d-432d-bfe4-f7b6f6683548"
/>

The cause of this is the line height being inherited into the pseudo
element which controls how the marker is positioned. I *think* this is
because it's being drawn with unicode symbols but I'm not sure. It could
just be from the `list-item` display.

After this PR changes the line height its centered again:

<img width="227" height="58" alt="Screenshot 2025-07-14 at 15 42 05"
src="https://github.com/user-attachments/assets/1afa1f33-cc28-4b1f-9e04-e546f6848f57"
/>

Some notes:

This only affects Chrome and also does not appear to cause issues for
date/time inputs. While weird that this pseudo is the one used for a
`<datalist>` marker it is indeed correct.

Fixes #18499

Can use this Play to test the change:
https://play.tailwindcss.com/jzT35CRpr0

---------

Co-authored-by: Jonathan Reinink <[email protected]>

Author: thecrypticace

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;
         }

integrations/vite/nuxt.test.ts

@@ -7,7 +7,8 @@ const SETUP = {
         "type": "module",
         "dependencies": {
           "@tailwindcss/vite": "workspace:^",
-          "nuxt": "^3.13.1",
+          "nuxt": "3.14.0",
+          "nitropack": "2.11.0",
           "tailwindcss": "workspace:^",
           "vue": "latest"
         }

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',
   ])
 })