feat(ui): custom SVG select arrow — appearance:none, themed, hover/focus like input (v1.19 C) - #57
Merged
Merged
Conversation
…cus like input (v1.19 C)
This was referenced Aug 17, 2026
Merged
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
UI/UE 4th-round deepening — item C: native select styling (rant
2026-08-17T20:39:30, v1.19).All native
selectelements now use a custom SVG dropdown arrow instead of the browser default, consistent with the dark/light themes:--select-arrowCSS variable: inline SVG data-URI (light arrow#aab6c8for dark theme, dark arrow#55627afor light theme; spaces%20-encoded for safety)appearance:none+-webkit-appearance:nonehides the native arrow;padding-rightreserves arrow space (30px for.input, 24px for.th-filter, 22px for page-size)var(--accent), focus adds a 1px accent ring);disabled→opacity:.55+not-allowed.input(market filters#mk-provider/#mk-sort, share-form 3-level cascade#sf-provider/plan/model, settings language/default-model), dynamicselect.th-filter(table column filters),select[data-page-size](pager rows-per-page)optiondark background (select.input option),input-errorred border statebackground-color/background-imagelonghands (never thebackgroundshorthand) so the arrow image is never wiped; arrow rule declared after the shared.inputshorthand so it wins by source orderDocs:
docs/user-stories.mdv1.19 (item C) +ui/README.md「select 美化约定」. Verified bynode --check-style static smoke test (19 assertions: selector coverage of all static+dynamic selects, appearance:none, hover/focus, dual-theme arrows, no shorthand clobbering),cargo test,cargo fmt --check.Rant (verbatim)
Related
2026-08-17T20:39:30.507364(projectaitokenpool, status in_progress; A = feat(ui): URL hash routing — share/bookmark/refresh restore (v1.19 A) #55, B = feat(ui): transactions summary bar — income/expense/net tied to tab & column filters (v1.19 B) #56 merged)feat/ui-ue-round4-select-style(per rant: 分支 feat/ui-ue-round4; items D–G to follow)Tests
cargo test— 1 passedcargo fmt --check