Hasta ahora he hallado dos enfoques para agregar estilo a label con css puro:
Cambiar de orden y usar el selector +
, que se usa para elementos consecutivos.
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-color: aqua;
}
input:focus+label {
color: blue;
}
<form>
<input type="text" id="fname" name="fname">
<label for="fname">First Name</label>
<input type="text" id="lname" name="lname">
<label for="lname">Last Name</label>
</form>
El segundo enfoque implica usar la pseudo-clase focus-within que nos permite seleccionar un padre si alguno de sus hijos tiene el foco.
Como veras este enfoque esta pensado para labels implicitas y no explicitas como en tu caso.
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-color: aqua;
}
label[for=fname]:focus-within {
color: purple;
}
label[for=lname]:focus-within {
color: blue;
}
<form>
<label for="fname">First Name<input type="text" id="fname" name="fname"></label>
<label for="lname">Last Name<input type="text" id="lname" name="lname"></label>
</form>