FORM & INPUT
图标前后缀输入Icon Affix Input
输入框内嵌前置图标和后缀提示（如域名、单位、显隐密码的眼睛）。
效果预览
🔍搜索项目、成员或文档…
¥1,280CNY
nova.dev/👁
适合用在哪
搜索框、金额输入、网址输入、密码框。
容易踩的坑
- 边框和焦点样式写在 input 上而不是容器的 :focus-within，聚焦时光晕只包住一半。
- 密码显隐的眼睛图标没有 aria-label 和 aria-pressed，读屏用户不知道当前状态。
- 前缀图标不设 pointer-events:none，点击图标区域无法聚焦输入框。
设计提示词 · Prompt
图标前后缀输入（Icon Affix Input）：外层容器承担边框、圆角、聚焦光晕（container 上做 :focus-within 样式，input 本身无边框），内部横向排列——前置图标（16px、灰）+ 自适应 input（无边框透明底）+ 可选后缀。后缀三种典型：单位文字（¥ / % / kg）、固定域名（.nova.dev，用灰色不可编辑文字）、操作图标（密码显隐的眼睛、清除按钮）。整体高度 40-48px。图标颜色必须比文字浅两阶，避免抢输入内容的戏。
Icon Affix Input: the outer container takes the border, border radius and focus glow (style the container with :focus-within; the input itself has no border); inside, items are laid out horizontally — leading icon (16px, gray) + flexible input (borderless, transparent background) + optional suffix. Three typical suffixes: unit text (¥ / % / kg), a fixed domain (.nova.dev, in gray non-editable text), or an action icon (eye for password visibility, clear button). Overall height 40-48px. Icon color must be two steps lighter than the text so it doesn't upstage the input content.
常见搭配
同一页面里经常和「图标前后缀输入」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-affixwrap"> <div class="d-affix"><span class="d-affix__ic">🔍</span>搜索项目、成员或文档…</div> <div class="d-affix"><span class="d-affix__ic">¥</span><span style="color:var(--i-tx)">1,280</span><span class="d-affix__suffix">CNY</span></div> <div class="d-affix"><span style="color:var(--i-tx)">nova.dev/</span><span class="d-affix__ic" style="margin-left:auto">👁</span></div> </div>