单行输入框(五种状态)· 多行输入框 · 前缀图标 + 后缀
| 状态 | 描边 | 背景 | 其他 |
|---|---|---|---|
| 默认 | #DDE1EB | #FFFFFF | 占位文字 #A8B4C8 |
| 悬停 | #3388FF | #FFFFFF | 有内容时右侧显示清除图标 |
| 激活 | #3388FF | #FFFFFF | 外发光 0 0 0 2px #D6EDFF;有内容时右侧显示清除图标 |
| 禁用 | #E9ECF2 | #F5F7FA | 不可交互,cursor: not-allowed |
| 错误 | #FF4433 | #FFFFFF | 框下方错误说明文字 12px #FF4433 |
| 属性 | 值 |
|---|---|
| 最小高度 | 84px(单行 32px + 增量 52px) |
| 内边距 | 8px 12px 24px 12px(底部留字数统计空间) |
| resize | vertical(可拖拽高度,不可横向拉伸) |
| 字数统计位置 | 输入框右下角,绝对定位 |
| 字数统计颜色 | 正常 #A8B4C8;接近上限 #FF6600;超出上限 #FF4433 |
| 其余状态 | 悬停 / 激活 / 禁用 / 错误与单行一致 |
| 属性 | 值 |
|---|---|
| 前缀图标 | 账号线状图标,16×16px,stroke #A8B4C8,绝对定位 left: 8px |
| 有前缀时左内边距 | padding-left: 32px |
| 后缀文字颜色 | #223355 |
| 后缀提示图标 | 线状 info 图标,16×16px,stroke #A8B4C8 |
| 清除图标与后缀共存 | 清除图标偏移至后缀左侧,right 值随后缀宽度调整 |
| 属性 | 值 |
|---|---|
| 前置区域背景 | #F5F7FA |
| 前置已选文字颜色 | #223355 |
| 前置下拉箭头 | 线状,12×12px,stroke #A8B4C8 |
| 前置与输入框拼接 | 共用描边,hover/focus 时两侧同步变色为 #3388FF |
| 后缀文字颜色 | #223355;禁用时 #A8B4C8 |
| 其余状态 | 悬停 / 激活 / 禁用 / 错误与基础单行一致 |
| 属性 | 值 |
|---|---|
| 前置背景 | 默认 #F5F7FA;激活时变 #FFFFFF |
| 后置背景 | 始终 #F5F7FA(不随激活变化) |
| 描边联动 | hover / focus / error 时前置、输入框、后置描边同步 |
| 下拉菜单 | 距触发元素 4px,圆角 4px,选中项 #3388FF / 背景 #F0F9FF |
| 下拉 hover | 背景 #F5F7FA |