Angular中如何用CSS修改禁用输入框对应的标签样式？

问题根源 #

你写的CSS选择器input:disabled+label是相邻兄弟选择器，它只能选中紧跟在input:disabled后面的标签元素，但你的HTML结构里<label>在<input>前面，所以这个选择器根本匹配不到目标标签。

可行修复方案 #

方案1：用CSS :has()伪类（现代浏览器支持） #

利用:has()检测标签后面紧跟的input是否处于禁用状态，直接选中对应标签：

::ng-deep label:has(+ input:disabled) {
  color: rgb(223, 107, 107) !important;
}

方案2：调整HTML结构 #

把<input>移到<label>前面，让原来的选择器能生效：

<input id="someLabel" disabled>
<label for="someLabel">someLabel</label>

原CSS代码无需修改：

::ng-deep input:disabled+label {
  color: rgb(223, 107, 107) !important;
}

方案3：结合Angular表单状态动态加类 #

如果用Angular表单控件，给标签绑定控件的禁用状态添加类：

<label 
  for="someLabel" 
  [class.disabled-label]="yourForm.get('someLabel').disabled"
>someLabel</label>
<input id="someLabel" formControlName="someLabel" disabled>

全局SCSS中定义类样式：

.disabled-label {
  color: rgb(223, 107, 107) !important;
}

方案4：通过共同父容器间接匹配 #

如果标签和输入框有共同父元素，用父容器的:has()伪类选中内部的标签：

<div class="field-wrapper">
  <label for="someLabel">someLabel</label>
  <input id="someLabel" disabled>
</div>

对应CSS：

::ng-deep .field-wrapper:has(input:disabled) label {
  color: rgb(223, 107, 107) !important;
}

内容的提问来源于stack exchange，提问作者Stefan