web-dev-qa-db-fra.com

basculement des styles sur l'étiquette (actif/focus) pour le champ de saisie avec css uniquement

Vous vous demandez s'il existe une méthode css-only à effectuer pour basculer les styles sur l'étiquette correspondante sur le focus de l'entrée. Jusqu'à présent, j'ai:

    $(document).on('focus active', 'input',function(){
        $('label[for='+$(this).attr('id')+']').addClass('active');
    });
    $(document).on('blur', 'input',function(){
        $('label[for='+$(this).attr('id')+']').removeClass('active');
    });

HTML:

    <div class="row">
     <label for="contact_form_mail">Email</label>
     <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    </div>

Et CSS:

.active{ color:red; }

Edit: Je suis sûrement au courant des "solutions de contournement" des sélecteurs enfants et frères et soeurs, mais réorganiser un balisage propre pour un style pur ne semble pas correct;

http://jsfiddle.net/fchWj/3/

htmlcsscss3css-float
13
worenga

Essayez de cette façon: - Placez votre étiquette après l’entrée et faites-la flotter à gauche. Et appliquer la fratrie.

Html

<div class="row">
    <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    <label for="contact_form_mail">Email</label>
</div>

CSS

label {
    float:left;
}
input:focus + label {
    color:red;
}

Démo

C'est un hack pour faire fonctionner le sélecteur de fratrie adjacent car il ne s'applique qu'à l'élément suivant et non au précédent. ~ sélectionnera tous les frères et soeurs adjacents après cet élément. Donc, si vous rencontrez différents .row pour chaque section d’entrées, utilisez +.

16
PSL

Si vous êtes prêt à changer d'éléments, alors ici

Demo 

<div>
    <input type="text" />
    <label for="e_mail">E-Mail</label>
</div>

label {
    float: left;
    margin-right: 5px;
}

input[type=text]:focus + label {
    color: red;
}

Explication: Nous utilisons le sélecteur adjacent + ici. Par conséquent, lorsque la zone de texte est sélectionnée, nous sélectionnons la balise label et appliquons la couleur red

Note: N'oubliez pas d'effacer les flotteurs;)

14
Mr. Alien

C'est possible avec CSS uniquement, sans changer l'ordre de l'étiquette et de l'entrée. Vous pouvez utiliser une pseudo-classe CSS :focus-within sur l'élément parent, qui s'applique aux éléments possédant un élément enfant ayant le focus.

Dans votre exemple, vous pouvez utiliser les éléments suivants:

.row:focus-within label {
    color: red;
}

Notez que cette pseudo-classe est relativement nouvelle et que seuls les navigateurs modernes la prennent en charge. 

4
Johnny Fekete

Il y en a, mais seulement si vous placez l'étiquette après l'entrée.

<input name="field" type="text" />
<label for="field">Label Here</label>

input:focus + label{
    color: red;
}

Maintenant, si vous voulez que l'étiquette soit placée devant elle, vous devez créer un style CSS avec position absolue pour la placer avant le champ de saisie, puis ajouter une marge sur l'entrée pour la déplacer vers la droite.

<div>
    <input name="field" type="text" />
    <label for="field">Label Here</label>
</div>

div{
   position: relative;
}
input{
   margin-left: 40px;
}
label{
   position:absolute;
   left:0;
}
3
Ali Bassam

Premièrement, nous pouvons utiliser un sélecteur qui correspond à une étiquette immédiatement suivie de la balise d’entrée ( input: focus + label ). Mais il reste le problème, que l'étiquette suive après le champ de saisie réel. Si vous souhaitez le placer au-dessus de la saisie de texte, vous devez changer la position des commandes. Cela peut être fait avec une pseudo-table CSS. 

<div class="pseudo-table">
   <input id="yourname" name="yourname" type="text" placeholder="Name...">
   <label for="yourname">Name</label>
</div>

Le style de la table artificielle est ...

.pseudo-table { display: table;  }

Avec cela en place, nous pourrions transformer l'étiquette, par exemple. vers un table-header-group :

label { display: table-header-group; }

et le champ de saisie vers un groupe de lignes-rangées :

input { display: table-row-group; }

En combinaison avec notre sélecteur suivi de, nous avons terminé et cela semble bon:

input:focus + label {
    color:red;
    font-weight: bold;
}

Pour une démo, voyez ceci Fiddle

HTH

2
hennson

Aucun sélecteur ne correspond à un élément précédent ... Ceci correspond à une étiquette immédiatement suivie d'une balise d'entrée. 

input:focus + label {
    color: red;
}
1
sjkm

Cela vous donne une étiquette en haut de l'entrée, surligne l'étiquette pendant que l'entrée est active.
HTML

<div class="row">
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
<label for="contact_form_mail">Email</label>
</div>

<code>
.row{
    display:flex;
    flex-direction:column-reverse;
    align-self:flex-start;
 }
 .row input:focus{
     border: 1px solid red;
  }
  .row input:focus+label{
     color:red;
  }
  </code>
0
Li Zhen Wu