Skip to content

feat(ui): custom SVG select arrow — appearance:none, themed, hover/focus like input (v1.19 C) - #57

Merged
argszero merged 1 commit into
mainfrom
feat/ui-ue-round4-select-style
Aug 17, 2026
Merged

argszero merged 1 commit into
mainfrom
feat/ui-ue-round4-select-style

Conversation

@argszero

Copy link
Copy Markdown
Owner

Summary

UI/UE 4th-round deepening — item C: native select styling (rant 2026-08-17T20:39:30, v1.19).

All native select elements now use a custom SVG dropdown arrow instead of the browser default, consistent with the dark/light themes:

  • --select-arrow CSS variable: inline SVG data-URI (light arrow #aab6c8 for dark theme, dark arrow #55627a for light theme; spaces %20-encoded for safety)
  • appearance:none + -webkit-appearance:none hides the native arrow; padding-right reserves arrow space (30px for .input, 24px for .th-filter, 22px for page-size)
  • hover / focus border matches inputs (var(--accent), focus adds a 1px accent ring); disabled → opacity:.55 + not-allowed
  • Covers every select source: static .input (market filters #mk-provider/#mk-sort, share-form 3-level cascade #sf-provider/plan/model, settings language/default-model), dynamic select.th-filter (table column filters), select[data-page-size] (pager rows-per-page)
  • Preserved: option dark background (select.input option), input-error red border state
  • Implementation detail: the select rules use background-color/background-image longhands (never the background shorthand) so the arrow image is never wiped; arrow rule declared after the shared .input shorthand so it wins by source order

Docs: docs/user-stories.md v1.19 (item C) + ui/README.md「select 美化约定」. Verified by node --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)

Rant: UI/UE 第四轮多角度深化 — 状态保持、信息密度、原生控件美化、帮助可达性(宿主 2026-08-17 第四轮指示:继续从多角度美化 UI、优化 UE)

C. 原生 select 美化

  • 当前 select 是原生箭头,与深色主题不搭:自定义下拉箭头(CSS background SVG 箭头 + appearance:none + padding-right),hover/focus 边框同 input
  • option 深色背景已适配(select.input option 已有),保持
  • 覆盖市场筛选、共享表单、数据表 page-size、管理员表单等所有 select.input

Related

Tests

  • Static smoke test — 19/19 assertions pass (all select sources covered, appearance:none, themed arrows, no shorthand clobber)
  • cargo test — 1 passed
  • cargo fmt --check

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant