CSS样式代码
/* ===========
极简登录输入框（支持深色模式/错误态/禁用/响应式）
=========== */
/* 色板与可定制变量 */
:root {
--brand: #2563eb; /* 品牌蓝（焦点） */
--brand-hover: #60a5fa; /* 悬停边框 */
--error: #ef4444; /* 错误态 */
--text: #111827; /* 正文字色 */
--bg: #ffffff; /* 输入背景 */
--border: #e5e7eb; /* 默认边框 */
--placeholder: #9ca3af; /* 占位符 */
--hint: #6b7280; /* 辅助提示 */
--disabled-bg: #f3f4f6; /* 禁用背景（浅色） */
}
/* 深色模式（自动适配） */
@media (prefers-color-scheme: dark) {
:root {
--text: #e5e7eb;
--bg: #111827;
--border: #374151;
--hint: #9ca3af;
--disabled-bg: #1f2937; /* 深色禁用背景 */
}
}
/* 容器：移动端全宽，桌面定宽 320px */
.form-field {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans",
"Liberation Sans", sans-serif;
width: 100%;
}
@media (min-width: 768px) {
.form-field {
width: 320px;
}
}
/* 标签与提示文本（可选） */
.field-label {
display: block;
margin: 0 0 8px;
font-size: 14px;
font-weight: 500;
color: var(--text);
}
.field-hint,
.field-error {
margin: 6px 0 0;
font-size: 12px;
line-height: 1.4;
}
.field-hint { color: var(--hint); }
.field-error {
color: var(--error);
display: none; /* 默认隐藏错误提示 */
}
/* 基础输入框样式 */
.input {
-webkit-appearance: none;
appearance: none;
width: 100%;
font-size: 14px; /* 系统字体 14px */
line-height: 1.5;
color: var(--text);
background-color: var(--bg);
border: 1px solid var(--border); /* 1px 边框 */
border-radius: 8px; /* 圆角 8px */
padding: 12px 14px; /* 内边距 12/14 */
transition: border-color .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
/* 占位符颜色 */
.input::placeholder {
color: var(--placeholder);
opacity: 1; /* 统一浏览器表现 */
}
/* 悬停边框颜色（避免触屏设备误触发） */
@media (hover: hover) and (pointer: fine) {
.input:hover:not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(:invalid) {
border-color: var(--brand-hover);
}
}
/* 焦点状态：品牌蓝边框 + 轻阴影 */
.input:focus,
.input:focus-visible {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* 禁用状态 */
.input:disabled {
background-color: var(--disabled-bg);
color: #9ca3af;
border-color: var(--border);
cursor: not-allowed;
opacity: 1; /* 保持可读 */
}
/* 错误态：支持 aria-invalid / 类名 / 原生校验（聚焦时阴影） */
.input[aria-invalid="true"],
.input.is-invalid {
border-color: var(--error);
}
.input[aria-invalid="true"]:focus,
.input.is-invalid:focus,
.input:invalid:focus {
border-color: var(--error);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
/* 错误提示联动显示（同一容器内的兄弟元素） */
.form-field .input[aria-invalid="true"] ~ .field-error,
.form-field .input.is-invalid ~ .field-error,
.form-field .input:invalid ~ .field-error {
display: block;
}
/* 错误时隐藏默认辅助提示，避免信息噪音 */
.form-field .input[aria-invalid="true"] ~ .field-hint,
.form-field .input.is-invalid ~ .field-hint,
.form-field .input:invalid ~ .field-hint {
display: none;
}
/* 优化自动填充（Chrome/Safari） */
.input:-webkit-autofill {
-webkit-text-fill-color: var(--text);
box-shadow: 0 0 0 1000px var(--bg) inset; /* 保持背景一致 */
transition: background-color 9999s ease-out 0s; /* 规避黄色闪烁 */
}
/* 高对比模式可访问性（Windows） */
@media (forced-colors: active) {
.input {
border-color: CanvasText;
}
.input:focus,
.input:focus-visible {
outline: 2px solid Highlight;
box-shadow: none;
}
}
代码说明
-
样式特性：
- 视觉规范：圆角8px、1px边框、系统字体14px、内边距12/14，移动端100%宽度，桌面宽度320px。
- 交互状态：
- hover：边框颜色 #60a5fa（仅在桌面等精准指针设备上触发，避免触屏设备误触发）。
- focus/focus-visible：边框 #2563eb + 3px 轻阴影（rgba(37,99,235,0.15)）。
- disabled：背景 #f3f4f6（深色模式下自动适配为 #1f2937），文本变浅，光标 not-allowed。
- 错误态：边框 #ef4444，聚焦时同色轻阴影；通过 [aria-invalid="true"] 或 .is-invalid 类控制，兼容 :invalid 聚焦时样式。
- 文本与可读性：占位符 #9ca3af；提供 .field-hint（灰）与 .field-error（红）两个提示层级，错误态自动切换显示。
- 深色模式：使用 prefers-color-scheme 自动切换文本、背景、边框与禁用背景；品牌色与错误色在深色模式下保持一致确保辨识度。
- 可访问性：
- 使用 :focus-visible 提供更精准的键盘焦点样式，保留 :focus 作为兼容兜底。
- 支持高对比模式（forced-colors）。
- 建议在错误提示上结合 aria-describedby 关联输入框，辅助读屏器读取。
-
兼容性：
- 现代浏览器（Chrome/Edge/Firefox/Safari）均支持；:focus-visible 在 Safari 15.4+ 支持，已通过 :focus 兜底。
- hover 媒体查询在桌面浏览器均正常，触屏设备不触发。
- WebKit 自动填充优化对 Chrome/Safari 生效；其他浏览器不影响显示。
- 高对比模式规则适用于 Windows 平台（可选增强，不影响其他环境）。
-
使用说明：
- 结构建议（类名可按需调整）：
- 外层容器用 .form-field 包裹输入与提示文本，实现响应式宽度与提示联动。
- 输入框使用 .input 类；正常提示使用 .field-hint；错误提示使用 .field-error。
- 错误状态触发方式（三选一，推荐前两种，便于控制显示时机）：
- 在输入框添加 aria-invalid="true"。
- 在输入框添加类名 .is-invalid。
- 使用原生校验 :invalid（建议仅在提交后或交互后配合处理，否则可能过早显示）。
- 提示联动：
- 需保证 .field-hint/.field-error 与 .input 同属一个 .form-field 容器内，且位于输入框之后，CSS 才能联动显示/隐藏。
- 宽度与布局：
- .form-field 在 <768px 全宽，≥768px 固定为 320px；如希望仅限制最大宽度可将媒体查询内的 width: 320px 改为 max-width: 320px。
- 字体：
- 已内置系统字体栈；如项目有品牌字体，请在 .form-field 上覆盖 font-family。
效果预览
- 默认：白底、1px 浅灰边框、圆角8px；占位符灰色；输入文本深灰。
- hover（桌面）：边框由浅灰过渡为 #60a5fa。
- focus：边框变为品牌蓝 #2563eb，并出现 3px 轻量外发光阴影（不影响布局）。
- 错误态：边框变为 #ef4444；聚焦时出现红色轻阴影；错误提示文案显示，普通辅助提示隐藏。
- 禁用：背景为浅灰（深色模式为深灰），文字变浅，鼠标光标为禁止态。
- 深色模式：整体背景、文本、边框对比度提升；交互与错误色保持品牌一致性与可读性。
