必须重置并统一表单元素样式：input[type="text"]用border:1px solid #ccc、box-sizing:border-box；focus状态补border-color或box-shadow；button[type="submit"]:disabled需显式声明并配opacity和cursor；label必须for/id绑定且扩大热区；错误提示紧跟input、用aria-live且动态设aria-invalid。

input[type="text"] 边框和聚焦样式怎么统一

不同浏览器对 input[type="text"] 的默认边框、内边距、字体大小不一致，直接加样式容易漏掉某些状态或元素。必须先重置再统一。

• 用 border: 1px solid #ccc 替代浏览器默认的 outline 和模糊边框
• 务必加 box-sizing: border-box，否则 padding 会撑宽元素，破坏布局
• :focus 状态下移除 outline: none，但要补上 border-color 或 box-shadow，否则键盘用户无法感知焦点位置
• 别只写 input:focus，漏掉 textarea:focus 和 select:focus，它们也需一致反馈

button[type="submit"] 悬停和禁用状态怎么写才不出错

很多人只设 :hover，结果用户点击后没反馈，或表单校验失败时按钮仍可点——这是交互断裂的典型表现。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 禁用状态必须显式写 button[type="submit"]:disabled，不能只靠 JS 改 class；否则屏幕阅读器和键盘 Tab 会跳过它，但视觉上还是“可点击”外观
• cursor: not-allowed 要配 opacity: 0.6 或 background-color: #ccc，纯改光标不够
• :active 状态建议加 transform: translateY(1px)，模拟按下效果，比只变色更可信
• 避免用 input[type="submit"] 和 button[type="submit"] 混用——前者无法包裹图标或复杂 HTML，后者更灵活且语义更准

label 和 input 怎么绑定才能保证可访问性和点击范围

点击文字无法触发输入框聚焦，或者屏幕阅读器读不出关联关系，基本等于放弃 10% 以上用户（含视障、触屏小屏、手抖人群）。

• label 必须用 for 属性指向 input 的 id，且两者值严格一致（大小写敏感）
• 不要用 label > input 嵌套方式替代 for/id 绑定——部分旧版 Safari 和 IE 不识别嵌套语义
• 给 label 加 display: block 或 inline-block，并设置足够 padding，扩大点击热区，尤其对移动端至关重要
• 复选框/单选框前的 label 文字，建议在 CSS 中加 user-select: none，防止双击误选文字触发拖拽

表单验证失败时的错误提示怎么放才不干扰操作流

弹 alert 或插在 input 下方堆叠错误文案，会让用户反复滚动、找不到焦点、重复提交——这不是美化，是反模式。

• 错误文案紧跟对应 input 后，用 aria-live="polite" 让屏幕阅读器自动播报
• 出错的 input 加 border-color: #e74c3c，同时保留 :focus 样式，确保键盘用户 tab 进来时依然可见
• 不要用 title 属性显示错误（hover 才出现，移动端无效），也不要用伪元素 ::after 插提示（对辅助技术不可见）
• JS 校验后，立即调用 input.reportValidity()，触发原生气泡提示（可被 CSS 覆盖），作为兜底行为

真实项目里最容易被忽略的，不是圆角或阴影，而是 :focus-visible 的兼容处理、aria-invalid 的动态切换，以及所有交互状态在高对比度模式下的可辨识度。这些不写进 CSS 就等于没写。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！