J'ai besoin de changer la couleur de l'étiquette lorsque la zone de texte reçoit une valeur.
textarea:active ~ label{
color: #ff8086;
}
Lorsque nous focalisons textarea, cela fonctionne bien avec ce code:
textarea:focus ~ label{
color: #55c57a;
}
Mais, j'ai besoin de cette couleur: color: # ff8086; quand nous n'avons aucune valeur, et une verte (comme sur l'image ci-dessus) quand quelque chose d'écrit sur textarea.
J'ai essayé: active, mais cela ne fonctionne que lorsque la souris clique:
<form action="#" class="form-reverse"> <textarea name="order-background__bussiness" id="order-background__bussiness" cols="30" rows="10"></textarea> <label for="order-background__bussiness">What are the company’s objectives?</label> </form>
Peut-être que quelqu'un a une solution pour cela?
PS: J'ai une solution pour cela avec JS, mais je suis curieux de savoir s'il existe une solution avec SASS également?
3 Réponses :
Vous pouvez utiliser la propriété valide css, elle correspondra si la zone de texte est un champ valide, vous pouvez définir l'attribut requis et elle correspondra au sélecteur valide s'il est valide ... https://www.w3schools.com/cssref/sel_valid.asp
<textarea required="required"></textarea><label>label</label>
textarea:valid + label{
background: #ff0000;
}
Vous pouvez également essayer comme ceci, cela fonctionnera bien comme ci-dessus:
textarea:not(:invalid) + label{
background: #ff0000;
}
Une autre option, qui évite de rendre la , et d'autres éléments de formulaire, obligatoire est d'utiliser le : placeholder-shown pseudo-classe; cela nécessite bien sûr qu'un attribut placeholder soit défini (bien qu'il puisse être défini sur un espace ou une chaîne de longueur nulle):
<form action="#" class="form-reverse"> <textarea name="order-background__bussiness" id="order-background__bussiness" placeholder=" "></textarea> <label for="order-background__bussiness">What are the company’s objectives?</label> </form>
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 1rem;
}
.form-reverse {
display: flex;
flex-direction: column-reverse;
width: 80vw;
margin: 0 auto;
}
textarea {
width: 100%;
min-height: 30vh;
}
:placeholder-shown+label {
color: #f90;
}
label {
color: limegreen;
font-size: 1.5em;
}
/* selects a <label> element immediately adjacent to
an element which has its placeholder string visible
to the user: */
:placeholder-shown+label {
color: #f90;
}
/* this selects all <label> elements, but is less specific
than the selector above; so will be 'overridden' in the
event that the previous selector matches: */
label {
color: limegreen;
font-size: 1.5em;
}
Références:
Je ne pense pas que tu peux faire quelque chose avec juste css / sass