Changing label for input with CSS in Angular

Question

I would like to change the css of all labels for all inputs that are disabled. I currently use this in a global scss style sheet:

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

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

But the css is not applied to the label.

Because it's work if `label` right after `input` not before. — Hardik Solanki, Jan 09 '23 at 15:21

score 2 · Answer 1 · answered Jan 09 '23 at 15:24

The + plus sign is used to select the elements that are placed immediately after the specified element. Therefore your CSS is looking for a label tag after a disabled input tag.

You can achieve more or less the same result like that:

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>

Hardik Solanki · Accepted Answer · 2023-01-09T15:49:37.910

2

You can use :has() selector to find previous selector like below:

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

edited Jan 09 '23 at 15:49

answered Jan 09 '23 at 15:38

Hardik Solanki

3,153
1
17
28

why use `::ng-deep`? why use `!important`? – Eliseo Jan 09 '23 at 15:48
@Eliseo I have update my answer, I have tried to follow OP code, but yes it's bad practice to use selector with `important` style. – Hardik Solanki Jan 09 '23 at 15:50
1

sorry i'm a bit angry today, sorry for my rude comment – Eliseo Jan 09 '23 at 16:16
@Eliseo It's ok. I can understand. :) – Hardik Solanki Jan 09 '23 at 16:21
Note that Firefox does not currently support `:has()` – VilleKoo Jan 09 '23 at 16:33

Changing label for input with CSS in Angular

2 Answers2