0
votes

Comment changer la couleur de la bordure d'un div si le champ de saisie qu'il contient n'est pas vide?

Je crée un formulaire en utilisant uniquement html et css. Je veux que chaque question du formulaire ait une aide visuelle en lui donnant une couleur de bordure gauche rouge qui passe au vert si le champ de saisie est rempli.

Ceci est mon html:

.form-unit:??? {
  border-left: 3px solid rgb(160, 200, 80);
}

Et voici le css pertinent:

.form-unit {
  margin: 40px 0;
  padding-left: 15px;
  border-left: 3px solid rgb(200, 80, 100);
}

Je veux changer la couleur de la bordure du div comme ceci:

<div class="form-unit">
  <label for="name" id="name-label"><b>Name</b></label>
  <input type="text" id="name" placeholder="Please enter your full name" required>
</div>

Quelle est la syntaxe pour cibler le div lorsque l' input[type="text"] n'est pas vide? Est-ce possible avec juste html et css?

html css forms parent-child

2 commentaires

Il n'y a aucun moyen de cibler le div comme un élément prent, et CSS ne fournit pas de sélecteur d'ancêtre (cela compliquerait énormément le CSS). Donc, ce n'est pas directement possible. Puis-je également vous conseiller qu'il serait peut-être préférable de remplacer le div par l' label comme emballage? Ensuite , vos entrées DonT ID de besoin, et vos étiquettes ne ont pas besoin for , et vous héritez certains avec l'possibilites label élément que je pense. Juste une suggestion. Mais ce que vous voulez n'est pas possible en CSS pur.

en doute jusqu'à ce que has() soit implémenté en CSS

3 Réponses :

0
votes

il n'y a pas encore de sélecteur parent , il faut le penser autrement:

vous pouvez utiliser un sélecteur de sibbling avec une balise vide

<div class="form-unit">
  <label for="name" id="name-label"><b>Name</b></label>
  <input type="text" id="name" placeholder="Please enter your full name" required>
  <b></b>
</div>

.form-unit {
  margin: 40px 0;
  padding-left: 15px;
  position: relative;
  border-left: 3px solid rgb(160, 200, 80);
}

input:invalid+b {
  position: absolute;
  top: 0;
  left: -3px;
  bottom: 0;
  border-left: 3px solid rgb(200, 80, 100);
}

0 commentaires

0
votes

Vous pouvez faire ce que vous recherchez en utilisant la pseudo commande valid en CSS. Vous pouvez mettre la boîte en surbrillance s'il y a du texte à l'intérieur. Regarde ça:

<div class="form-unit">

  <label for="name" id="name-label"><b>Name</b></label>

  <input type="text" id="name" placeholder="Please enter your full name" required>
      <span></span>
</div>

input {
  font: inherit;
  padding: 0.25em 0.5em;
  border: 0.125em solid rgb(200, 80, 100); 
  outline: none;
}

input:valid{
  border-color: rgb(160, 200, 80);
}

input:invalid + span::before {
  content: 'âœ–';
  color: red;
}

input:valid + span::before {
  content: 'âœ“';
  color: green;
}

Et juste pour le plaisir, vous pouvez ajouter une coche ou et X après la case. comme ça:

<div class="form-unit">
  <label for="name" id="name-label"><b>Name</b></label>
  <input type="text" id="name" placeholder="Please enter your full name" required>
  <span></span>
</div>

input {
  font: inherit;
  padding: 0.25em 0.5em;
  border: 0.125em solid rgb(200, 80, 100); 
  outline: none;
}

input:valid{
  border-color: rgb(160, 200, 80);
}

0 commentaires

0
votes

Vous pouvez le faire comme ceci en utilisant la commande a span avec une commande psuedo valid . Vérifiez-le!

<div class="form-unit">

  <label for="name" id="name-label"><b>Name</b></label>

  <input type="text" id="name" placeholder="Please enter your full name" required>
      <span></span>
</div>

input:invalid + span::before {
  content: '';
  margin: 40px 0;
  padding-left: 15px;
  border-left: 3px solid rgb(200, 80, 100);
}

input:valid + span::before {
  content: '';
  margin: 40px 0;
  padding-left: 15px;
  border-left: 3px solid rgb(160, 200, 80);
}

span {
  float:left;
}

0 commentaires