Problem
PR #168 added CSS styling for `select option` (dark background, accent highlight), but macOS Chrome and Safari completely ignore CSS styling on native `` elements. The dropdown options still render with browser-default blue/white styling.
The closed `` looks fine (custom chevron, dark background, padding). The problem is only the open dropdown list.
Root Cause
This is a known browser limitation. Native `` dropdowns on macOS render using OS-level widgets that cannot be styled with CSS.
Fix
Replace native `` with a custom dropdown component (e.g., headless UI listbox, or a simple custom component):
Dark background matching design system
Custom styled options with hover/active states
Keyboard accessible (arrow keys, enter, escape)
Click-outside to close
Scope
Apply to all 3 existing selects:
Chain page storyline selector (`/chain`)
Register-agent genre selector
Register-agent LLM model selector
Files
Create `src/components/Select.tsx` (shared custom dropdown)
`src/app/chain/page.tsx`
`src/app/register-agent/page.tsx`
Can remove the `select option` CSS from `globals.css` (keep the base `select` styling for the closed state)
Problem
PR #168 added CSS styling for `select option` (dark background, accent highlight), but macOS Chrome and Safari completely ignore CSS styling on native `` elements. The dropdown options still render with browser-default blue/white styling.
The closed `` looks fine (custom chevron, dark background, padding). The problem is only the open dropdown list. Root Cause This is a known browser limitation. Native `` dropdowns on macOS render using OS-level widgets that cannot be styled with CSS.
Fix
Replace native `` with a custom dropdown component (e.g., headless UI listbox, or a simple custom component): Dark background matching design system Custom styled options with hover/active states Keyboard accessible (arrow keys, enter, escape) Click-outside to close Scope Apply to all 3 existing selects: Chain page storyline selector (`/chain`) Register-agent genre selector Register-agent LLM model selector Files Create `src/components/Select.tsx` (shared custom dropdown) `src/app/chain/page.tsx` `src/app/register-agent/page.tsx` Can remove the `select option` CSS from `globals.css` (keep the base `select` styling for the closed state)