表单元素未继承CSS样式主因是浏览器user-agent stylesheet的强默认样式覆盖，需用DevTools定位来源，通过更具体选择器、appearance重置或!important调试；父容器、重置CSS、层叠上下文及焦点逻辑亦影响样式生效。
表单元素没继承 CSS 样式？检查 user-agent stylesheet 覆盖
浏览器自带的 user-agent stylesheet 对 <input>、<select></select>、<textarea></textarea> 有强默认样式（比如 Chrome 给 input[type="number"] 加了上下箭头，Safari 给 select 加了原生下拉图标），这些规则优先级常高于你的普通 CSS 选择器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器 DevTools 的 “Computed” 面板，点开某条样式，看来源是不是
user-agent stylesheet - 用更具体的选择器覆盖，比如把
input { border: 1px solid #ccc; }改成input:not([type="hidden"]) { border: 1px solid #ccc; }或直接加!important（仅限调试时快速验证） - 对
select和textarea，记得重置appearance：添加appearance: none;并补上-webkit-appearance: none;、-moz-appearance: none;
form 内部样式不生效？确认是否被父容器或重置 CSS 干扰
很多项目引入了 normalize.css 或 reset.css，它们会把 form 设为 display: block，同时清空 margin/padding；但更隐蔽的是，某些 UI 框架（如 Bootstrap）会给 form 下所有 input 加 width: 100% 或 box-sizing: border-box，导致你写的宽度值失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 DevTools 中选中表单元素，右键 “Break on > attribute modifications”，然后手动改 class 看是否触发样式重排——可快速定位是否被 JS 动态加了 class
- 检查父级是否有
overflow: hidden或transform，这类属性会创建新层叠上下文，可能让绝对定位的下拉框（如自定义select）被裁剪 - 用
getComputedStyle(document.querySelector('input'))在控制台查真实计算值，比肉眼判断更准
伪类样式（:focus、:disabled）不触发？注意可访问性与聚焦逻辑
:focus 不生效，常见原因不是 CSS 写错了，而是元素根本无法获得焦点：比如 div 默认不可聚焦，input 被设了 tabindex="-1"，或者用了 pointer-events: none 却忘了移除它。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
:disabled只对原生禁用属性有效，input[disabled]可以，但input.disabled（仅靠 class）不行——得配合 JS 切换disabled属性 -
:focus-visible在部分浏览器（如 Safari）支持度有限，别全依赖它做焦点样式；稳妥做法是:focus+:focus-within组合 - 移动端点击
select或input[type="date"]时，部分安卓 WebView 会跳过:focus触发，可用onfocus事件加 class 临时兜底
自定义表单控件样式“断层”？<label></label> 和控件绑定关系失效
很多人用隐藏原生 input[type="checkbox"] + 伪元素画勾选框，但忘了 label 必须正确关联控件（通过 for 属性或嵌套），否则点击 label 不触发控件状态变化，:checked 伪类自然不会生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查
label[for]的值是否和对应input[id]完全一致（大小写、空格、连字符都不能错） - 避免用 JS 动态生成 ID 后没同步更新
label[for]，这种 bug 在 SSR/SSG 场景下特别难复现 - 若用
<label><input type="radio"> 文字</label>嵌套方式，确保中间没插入其他块级元素（如<p></p>），否则 HTML 结构非法，浏览器可能降级处理
样式能显示出来，不代表它在所有交互路径下都稳定——特别是涉及键盘操作、屏幕阅读器、WebView 内核差异时，那些没显式声明 role、aria-checked 的自定义控件，样式可能“看着对”，实际行为已脱节。
