Sur le focus d'entrée de changer la couleur de l'étiquette. Comment?

Sur l'entrée focus je veux changer la couleur de l'élément label. Comment puis-je y parvenir en moins?

.control-label{
      color: @gray-light;
}
.controls{
  input,
  textarea{
    background-color:red; 
    &:focus{
      .control-label &{
        color: red;  //HERE
      }

    }
}

HTML:

<div class="control-group">
    <label class="control-label" for="inputEmail">Firstname</label>
    <div class="controls">
        <input type="text" id="inputEmail" placeholder="Firstname">
    </div>
</div>

OriginalL'auteur | 2014-01-16

  1. 3

    Une solution serait de déplacer la label ci-dessous la input dans les DOM, mais la position absolue (à la mère) de sorte que le label semble être au-dessus de la input champ:

    <div>
  <input type="text"/>
  <label>Text</label>
</div>

    En CSS déplacer le label vers le haut, la input vers le bas:

    label {
  position: absolute
  top: 0
}

input {
  position: absolute
  bottom: 0
}

    Et l'utilisation de la :focus de l'état pour changer le style de la label:

    input:focus + label {
    color: red
}

    Voir l'exemple:

    http://codepen.io/robcampo/pen/zGKLgg

    Sur le focus, le label s'allume en rouge. Pas de JS nécessaire.

    OriginalL'auteur Rob Campion

  2. 3

    Une solution serait d'utiliser le :focus-within sélecteur.

    Donc, vous devez faire quelque chose comme ci-dessous. En supposant que vous ayez toujours une entrée d'une description à l'intérieur d'un control-group, il sera le style de l'étiquette chaque fois que l'entrée est concentrée sur. 

    control-group {
    &:focus-within {
        control-label {
            color: red; 
        }
    }
}

    Plus d'informations peuvent être trouvées ici: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

    OriginalL'auteur Michael Robinson