Skip to content

Commit 88b9f15

Browse files
thecrypticacereinink
thecrypticace
and
reinink
authored
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 <jonathan@reinink.ca>
1 parent ce0e775 commit 88b9f15

File tree

7 files changed

+35
-12
lines changed

7 files changed

+35
-12
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1515
- Track source locations through `@plugin` and `@config` ([#18345](https://github.com/tailwindlabs/tailwindcss/pull/18345))
1616
- Handle when `process.env.DEBUG` is a boolean in `@tailwindcss/node` ([#18485](https://github.com/tailwindlabs/tailwindcss/pull/18485))
1717
- Ignore consecutive semicolons in the CSS parser ([#18532](https://github.com/tailwindlabs/tailwindcss/pull/18532))
18+
- Center the dropdown icon added to an input with a paired datalist ([#18511](https://github.com/tailwindlabs/tailwindcss/pull/18511))
1819

1920
## [4.1.11] - 2025-06-26
2021

‎integrations/cli/index.test.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1924,6 +1924,9 @@ test(
19241924
::-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 {
19251925
padding-block: 0;
19261926
}
1927+
::-webkit-calendar-picker-indicator {
1928+
line-height: 1;
1929+
}
19271930
:-moz-ui-invalid {
19281931
box-shadow: none;
19291932
}

‎integrations/vite/nuxt.test.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ const SETUP = {
77
"type": "module",
88
"dependencies": {
99
"@tailwindcss/vite": "workspace:^",
10-
"nuxt": "^3.13.1",
10+
"nuxt": "3.14.0",
11+
"nitropack": "2.11.0",
1112
"tailwindcss": "workspace:^",
1213
"vue": "latest"
1314
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,10 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
240240
padding-block: 0;
241241
}
242242
243+
::-webkit-calendar-picker-indicator {
244+
line-height: 1;
245+
}
246+
243247
:-moz-ui-invalid {
244248
box-shadow: none;
245249
}

‎packages/tailwindcss/preflight.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,14 @@ textarea {
349349
padding-block: 0;
350350
}
351351

352+
/*
353+
Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
354+
*/
355+
356+
::-webkit-calendar-picker-indicator {
357+
line-height: 1;
358+
}
359+
352360
/*
353361
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
354362
*/

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -354,6 +354,10 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
354354
padding-block: 0;
355355
}
356356
357+
::-webkit-calendar-picker-indicator {
358+
line-height: 1;
359+
}
360+
357361
:-moz-ui-invalid {
358362
box-shadow: none;
359363
}

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -279,17 +279,19 @@ test('source maps trace back to @import location', async ({ expect }) => {
279279
'preflight.css: 139:4-14 <- 337:2-12',
280280
'preflight.css: 141:2-329 <- 340:0-348:39',
281281
'preflight.css: 142:4-20 <- 349:2-18',
282-
'preflight.css: 144:2-19 <- 356:0-17',
283-
'preflight.css: 145:4-20 <- 357:2-18',
284-
'preflight.css: 147:2-96 <- 364:0-366:23',
285-
'preflight.css: 148:4-22 <- 367:2-20',
286-
'preflight.css: 150:2-59 <- 374:0-375:28',
287-
'preflight.css: 151:4-16 <- 376:2-14',
288-
'preflight.css: 153:2-47 <- 383:0-45',
289-
'preflight.css: 154:4-28 <- 384:2-26',
290-
'index.css: 157:0-16 <- 5:0-42',
291-
'input.css: 158:0-5 <- 3:0-5',
292-
'input.css: 159:2-33 <- 4:9-18',
282+
'preflight.css: 144:2-38 <- 356:0-36',
283+
'preflight.css: 145:4-18 <- 357:2-16',
284+
'preflight.css: 147:2-19 <- 364:0-17',
285+
'preflight.css: 148:4-20 <- 365:2-18',
286+
'preflight.css: 150:2-96 <- 372:0-374:23',
287+
'preflight.css: 151:4-22 <- 375:2-20',
288+
'preflight.css: 153:2-59 <- 382:0-383:28',
289+
'preflight.css: 154:4-16 <- 384:2-14',
290+
'preflight.css: 156:2-47 <- 391:0-45',
291+
'preflight.css: 157:4-28 <- 392:2-26',
292+
'index.css: 160:0-16 <- 5:0-42',
293+
'input.css: 161:0-5 <- 3:0-5',
294+
'input.css: 162:2-33 <- 4:9-18',
293295
])
294296
})
295297

0 commit comments

Comments
 (0)