Как стилизовать label, который стоит до input, если input:disabled?

Question

[Амир]

Здравствуйте
Есть следующая разметка:

<label for="some1">This is label</label>
<input type="text" name="some1" value="Test" />

Мне необходимо изменить цвет label если input:disabled
Я пробовал так:

& > label input:disabled {
  color: red;
}

Но не работает. Даже не представляю, как еще можно конструкцию поставить.
Заранее благодарен за ответы.

Answer 1

[szQocks]

label:has(+ input:disabled) {
color: red;
}

Comments

[Алексей Уколов]

Для контекста: https://caniuse.com/css-has

[szQocks]

Алексей Уколов, знаю я про поддержку, это вариант будущего)

[Алексей Уколов]

Про поддержку я для автора вопроса написал и для тех, кто потом в него придёт.

Answer 2

[Алексей Уколов]

Сходу ничего лучше вот такого не придумалось:

<div class="form-element">
  <input type="text" name="some1" value="Test" disabled />
  <label for="some1">This is label</label>
</div>

.form-element {
  display: flex;
  flex-direction: row;
}

.form-element label {
  order: 1;
}

.form-element input {
  order: 2;
}

.form-element input:disabled + label {
  color: red;
}

Должен бы работать просто селектор input:disabled ~ label, но почему-то не работает.

Comments

[szQocks]

за место order можно было просто сменить направление

flex-direction: row-reverse;
  justify-content: flex-end;

[Алексей Уколов]

szQocks, да, с утра голова отказывалась что-либо соображать, кроме решений "в лоб" :)

Answer 3

[Владимир Коротенко]

label:has(~ input:disabled) {
  color: red;  
}