应统一使用 button[type="submit"] 替代 input[type="submit"]，因其语义清晰、兼容性好、支持嵌套与键盘提交；必须重置 appearance 并完整定义 hover/active/disabled 状态样式，加载态应结合 disabled 属性与 css 控制。
button[type="submit"] 比 input[type="submit"] 更可靠
直接用 input[type="submit"] 美化，容易在 Safari 或旧版安卓 WebView 中出现字体继承异常、:hover 失效、文字垂直偏移等问题。而 button[type="submit"] 是容器元素，支持嵌套图标、多行文本、动态内容，语义清晰且键盘 Enter 键自动触发提交——这点对表单可用性至关重要。
常见错误是混用两者：button[type="submit"] 和 input[type="submit"] 同时存在，导致 CSS 规则冲突或 hover 效果错乱。统一用 button 即可避免这类问题。
appearance: none 是不可跳过的重置步骤
不加这一步，所有圆角、背景色、内边距都可能被浏览器默认样式覆盖。比如 Firefox 下 border-radius 被默认边框遮住，Safari 中按钮文字明显上浮，某些安卓系统只显示渐变底纹而忽略你设的 background-color。
必须写全三端兼容写法：
button[type="submit"], input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
漏掉任意一项，都可能在某类设备上“看起来没生效”。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
hover / active / disabled 必须单独定义
只写一个 background-color 不够，用户需要明确的视觉反馈：
-
:hover缺少transition→ 颜色突变生硬，建议加transition: background-color 0.2s, transform 0.1s -
:active没有压感 → 加transform: translateY(1px)模拟按下效果 -
:disabled未显式设样式 → 用户仍会误点，必须写opacity: 0.6; cursor: not-allowed -
:disabled:hover覆盖缺失 → 否则悬停色会错误生效，造成“禁用状态还能变色”的错觉
加载中状态不能只靠 JS 切 class
单纯用 JS 给按钮加 class="loading" 再隐藏文字、显示 spinner，容易出竞态问题：比如表单验证未完成就提前禁用，或网络失败后按钮卡在 loading 态无法恢复。
更稳妥的做法是：提交瞬间立即设 disabled 属性（原生防重复提交），再用 CSS 控制 loading 内容显示：
button[type="submit"]:disabled {
opacity: 0.6;
cursor: not-allowed;
}
button[type="submit"]:disabled::after {
content: "⏳";
margin-left: 8px;
}
这样既利用了 HTML 原生能力，又避免 JS 控制状态时的边界遗漏。真正的难点不在样式本身，而在禁用逻辑与表单生命周期的耦合——稍不注意，就会让用户点完没反应，也收不到任何提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
