在Angular中使用CSS更改输入的标签

yfwxisqw 于 2023-01-10 发布在 Angular

关注(0)|答案(2)|浏览(145)

我想更改所有被禁用的输入的所有标签的css。我目前在一个全局scss样式表中使用这个：

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

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

但是css没有应用到标签上。

2条答案

+加号用于选择紧跟在指定元素**之后的元素。因此，CSS将在禁用的input标记之后查找label标记。
你可以达到或多或少相同的结果，像这样：

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

.flex {
  display: flex;
  flex-direction: row-reverse;
  float: left;
}

<div class="flex">
  <input id="someLabel" disabled />
  <label for="someLabel">someLabel</label>
</div>

您可以使用:has()选择器查找上一个选择器，如下所示：

label:has(+ input:disabled) {
   color: rgb(223, 107, 107);
}