fieldset 设置 disabled 后如何通过 CSS 覆盖内部控件样式
浏览器默认将 disabled 的 fieldset 内部控件显示为灰色，但可以通过 CSS 强制改变其外观。
检查 fieldset 的默认样式与继承关系
fieldset 元素默认拥有 2px 的 groove 边框和少量内边距，并建立块级格式化上下文。当设置了 disabled 属性时，浏览器会自动禁用其内部所有表单控件，并将它们显示为灰色。这些控件位于一个匿名盒中，该匿名盒会继承 fieldset 的某些属性。如果希望改变这些控件的外观，需要明确知道它们继承自 fieldset 的哪些样式，以及浏览器默认的禁用状态样式。
开发者工具可以帮助定位这些样式。选中 fieldset 元素后，查看其计算样式，可以找到控制控件灰度显示的属性。通常，浏览器会对 disabled 的控件应用特定的颜色值。由于这些控件位于匿名盒中，直接修改 fieldset 的样式可能会影响整个区域，因此需要精确选择目标控件或利用 CSS 选择器进行针对性覆盖。
使用 CSS 选择器覆盖控件的颜色显示
要改变 disabled fieldset 内部控件的颜色，可以使用 CSS 选择器直接针对这些控件进行样式设置。由于这些控件位于 fieldset 内部，可以使用后代选择器，如 fieldset input:disabled 或 fieldset select:disabled。通过设置 color 属性，可以强制覆盖浏览器默认的灰色显示。例如，将 color 设置为红色或黑色，可以确保控件在视觉上保持可用状态。
需要注意的是，CSS 的优先级可能受到浏览器默认样式的影响。如果直接修改 color 属性无效，可以尝试使用 !important 标记，或者提高选择器的特异性。此外，还可以通过设置 opacity 属性来调整控件的透明度，从而在不改变颜色的情况下改变其外观。这种方法适用于需要保持控件交互性但希望调整视觉反馈的场景。
验证样式覆盖后的交互状态
在应用 CSS 样式后，必须验证控件是否仍然保持禁用状态。虽然样式被覆盖，但 disabled 属性仍然会阻止控件接收鼠标点击或键盘焦点事件。可以通过开发者工具的事件监听器面板检查控件是否仍然被禁用。如果控件在视觉上被修改，但仍然无法交互，说明样式覆盖成功，但交互逻辑未被改变。
如果希望控件在视觉上被禁用但仍然可以交互，需要移除或覆盖 disabled 属性。这可以通过 JavaScript 实现，例如在页面加载时移除 fieldset 的 disabled 属性，或者通过 CSS pointer-events 属性控制交互。然而，这会改变控件的默认行为，需要谨慎使用。验证时，应确保样式修改不会破坏表单提交或验证逻辑。
处理 legend 内部控件的样式差异
根据规范，legend 元素内部的表单控件不会被禁用，因此它们不受 fieldset disabled 属性的影响。这意味着这些控件可以正常交互，并且不受 fieldset 默认灰色样式的影响。如果需要为这些控件设置特定的样式，可以直接针对 legend 内部的控件进行选择，例如 fieldset legend input。
由于 legend 内部控件不受 fieldset disabled 属性影响，它们也不会继承 fieldset 的某些样式。因此，在覆盖样式时，需要确保选择器能够正确匹配这些控件。如果 fieldset 被禁用，但 legend 内部的控件需要保持可用，可以单独为这些控件设置样式，而不需要担心 fieldset 的默认样式干扰。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。