Can I change the color of legend text with CSS when an input is focused, similar to how fieldsets work?
Fieldsets change color when their respective input fields are focused. I want to achieve the same effect for legends.
fieldset {
border-radius: 0.6vh;
border: 1vh solid black;
padding: 1.68vh;
}
fieldset:focus-within {
border-color: blue;
}
/* legend does not change color when input is focused */
legend:focus-within {
color: blue;
}
legend {
padding: 0 1.2vh;
color: black;
}
input {
border: none;
padding: 0.29vh;
}
input::placeholder {
color: black;
}
input:focus {
outline: none;
}
<fieldset>
<legend>Name</legend>
<input type="text" placeholder="Your name">
</fieldset>