fix(ui): 日期占位遮挡改用普通 CSS 规则,不再依赖 Tailwind 任意变体
上一版用 `[&:not(:focus)::-webkit-datetime-edit]:text-transparent` 遮挡 浏览器自带的格式提示,但实际渲染里出现「选择日期」与「yyyy / mm / 日」 重叠——遮罩没生效。 排查过程: - 该规则在 dev 与 build 产物里都存在,dev 环境下 Chrome 与 Edge 均正常 - 用不含项目 CSS 的最小页面做隔离测试:Edge 的基线确实显示 「yyyy / mm / 日」(与反馈截图一致),且三种写法在 Edge 下都有效 - 结论:问题不在规则本身,而在这条规则依赖 Tailwind 扫描器从模板 字符串里提取类名,在 HMR / 增量构建时可能漏掉,属于不可靠的写法 修复:改在 style.css 里写普通 CSS,类名 date-field--blank。 - 刻意放在 @layer 之外:utilities 层优先级高于 components 层, 放进层里会被 text-slate-700 这类工具类盖掉 - 同时覆盖输入框自身与各分段伪元素,避免不同 Chromium 版本 着色位置不一致 - 仍保持「只在未聚焦时遮挡」,否则编辑时看不见正在输入的数字 验证:构建产物含全部 6 条规则;用 preview 起生产构建,Chrome 与 Edge 下字段均只显示「选择日期」。单元测试 485 个、E2E 25 个通过。
This commit is contained in:
@@ -71,3 +71,24 @@
|
||||
scrollbar-color: var(--color-slate-700) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 空值的日期输入框:遮住浏览器自带的格式提示。
|
||||
* Edge 会按页面 lang 拼出「yyyy / mm / 日」这种半英半中的提示,
|
||||
* 既与界面语言不统一,又容易被误读成已经有内容。
|
||||
*
|
||||
* 只在未聚焦时遮挡 —— 否则聚焦编辑时连正在输入的数字都看不见。
|
||||
* 同时覆盖输入框本身与各分段伪元素,避免不同 Chromium 版本着色位置不一致。
|
||||
*
|
||||
* 刻意写在 @layer 之外:Tailwind 的 utilities 层优先级高于 components 层,
|
||||
* 若放进层里会被 text-slate-700 之类的工具类盖掉。也不写成 Tailwind 任意变体,
|
||||
* 因为那依赖扫描器从模板字符串里提取类名,HMR 或增量构建时容易漏。
|
||||
*/
|
||||
.date-field--blank:not(:focus),
|
||||
.date-field--blank:not(:focus)::-webkit-datetime-edit,
|
||||
.date-field--blank:not(:focus)::-webkit-datetime-edit-text,
|
||||
.date-field--blank:not(:focus)::-webkit-datetime-edit-year-field,
|
||||
.date-field--blank:not(:focus)::-webkit-datetime-edit-month-field,
|
||||
.date-field--blank:not(:focus)::-webkit-datetime-edit-day-field {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user