1

¿Cómo aplicar una clase css a un Label cuando un input es seleccionado?

Quiero cambiar el color del label cuando se este escribiendo en esa caja de texto o es seleccionada

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

1
  • yo creo que para lograrlo sin alterar tu HTML solo va a ser osible usando ademas javascript. Commented el 21 mar. 2022 a las 19:56

1 respuesta 1

3

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.