In an ideal scenario, I wish for the text on a label to change color when the input value is considered invalid.
For instance:
<form>
<label>
Enter your name:
<input type="text">
</label>
</form>
Ideally, I would prefer this approach, but it doesn't work as expected since the problem lies with the <input> being invalid rather than the <label>:
label:invalid {
color: red
}
The structure of my <label> and <input> elements is intentional so that I don't have to assign any specific IDs to them.
A similar situation can be seen here, although the <label> and <input> are not directly related: