Theme the dropdown a native select paints for itself #79

New Issue

Closed

opened 2026-08-26 22:09:27 +00:00 by jcoffey-dev · 0 comments

jcoffey-dev commented

2026-08-26 22:09:27 +00:00

Owner

Closes #70.

A native <select>'s popup is painted by the browser from the element's own colours, not the page's. .from-select is deliberately background: transparent so it sits flush in the composer's From line — which left its popup with no background of its own, so the browser drew a light one while the text kept the app's light foreground. Light on light, exactly as screenshotted.

Fixed by styling `option`, not the control

That themes the popup without giving the closed select a box:

.composer-field .from-select { … background: transparent; color: var(--fg); }
select option,
select optgroup { background-color: var(--bg-elev); color: var(--fg); }

Verified in the browser, computed rather than eyeballed:

	before	after
select background	transparent	transparent — still flush
option background	unset → UA light	`#12303e` (`--bg-elev`)
option colour	light, inherited	`#eaf6f6` (`--fg`)

That's 12.5:1 contrast where it was light-on-light. Chrome renders the popup in-page, so it's visible in a screenshot too — dark with readable text.

Why it's scoped to every select

Nothing in the app styled option anywhere. So this wasn't one broken dropdown, it was the first one anyone happened to open in a dark theme. .select elsewhere gets away with it only because it sets an opaque background that the popup inherits. The next transparent select would have arrived with the same bug, so the rule covers all of them.

265 web + 77 server tests, typecheck and build clean. CSS only — no behaviour change.

Merged 2026-08-26 as coffey-labs/ihasmail@6e59f59d18

_{Rebuilt from: git history, session transcript.}

Closes #70. A native `<select>`'s popup is painted by the browser from **the element's own** colours, not the page's. `.from-select` is deliberately `background: transparent` so it sits flush in the composer's From line — which left its popup with no background of its own, so the browser drew a light one while the text kept the app's light foreground. Light on light, exactly as screenshotted. ## Fixed by styling `option`, not the control That themes the popup without giving the closed select a box: ```css .composer-field .from-select { … background: transparent; color: var(--fg); } select option, select optgroup { background-color: var(--bg-elev); color: var(--fg); } ``` Verified in the browser, computed rather than eyeballed: | | before | after | |---|---|---| | select background | transparent | transparent — still flush | | option background | *unset* → UA light | `#12303e` (`--bg-elev`) | | option colour | light, inherited | `#eaf6f6` (`--fg`) | That's **12.5:1** contrast where it was light-on-light. Chrome renders the popup in-page, so it's visible in a screenshot too — dark with readable text. ## Why it's scoped to every select **Nothing in the app styled `option` anywhere.** So this wasn't one broken dropdown, it was the first one anyone happened to open in a dark theme. `.select` elsewhere gets away with it only because it sets an opaque `background` that the popup inherits. The next transparent select would have arrived with the same bug, so the rule covers all of them. 265 web + 77 server tests, typecheck and build clean. CSS only — no behaviour change. **Merged** 2026-08-26 as coffey-labs/ihasmail@6e59f59d185f <sub>Rebuilt from: git history, session transcript.</sub>

This repo is archived. You cannot comment on issues.

1 Participants

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: coffey-labs/ihasmail-github-archive#79

Theme the dropdown a native select paints for itself #79

Fixed by styling option, not the control

Why it's scoped to every select

Fixed by styling `option`, not the control