Change color of legend on input focus

Question

Is there any way with CSS for changing color of legend text when input gets the focus, similar to fieldset working?

Each of the fieldset changes color when their particular input gets the focus. I am trying similarly for legend.

 fieldset { border-radius: 0.6vh; border: 1vh solid black; padding: 1.68vh; } fieldset:focus-within { border-color: blue; } /* legend not changing color when focused on input */ 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>

Answer 1

You need to get the event from the input focus and select with > the legend text and change color.

 fieldset { border-radius: 0.6vh; border: 1vh solid black; padding: 1.68vh; } fieldset:focus-within { border-color: blue; } /* legend not changing color when focused on input */ fieldset:focus-within > legend { 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>

Answer 2

You can do it with js function.

 function changeColorText() { let x = document.getElementById("text-area"); x.style.color = "blue"; }

 fieldset { border-radius: 0.6vh; border: 1vh solid black; padding: 1.68vh; } fieldset:focus-within { border-color: blue; } /* legend not changing color when focused on input */ 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" id="text-area" placeholder="Your name" onfocus="changeColorText()"> </fieldset>

Do you mean that?