1
votes

Changement de couleur d'arrière-plan du champ de saisie

Je veux garder la couleur d'arrière-plan du champ de saisie comme `` verte '', le problème est que lorsque je clique dessus pour écrire quelque chose, la couleur redevient blanche par défaut, voici mon code CSS:

<form className="form">
 <input type="text" name="name" className="form__name" placeholder="Name*"/>
        
 <input type="email" name="email" className="form__email" placeholder="Email*"/>
</form>

la partie HTML React:

  input{
            width: 100%;
            color: $white;      
            border: none;
            border-bottom: 1px solid $grey-light;
            outline: none;
            font-size: 1rem;
            margin-bottom: 1.25rem;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            background-color: $green;
        }

reactjs css

1 commentaires

Appliquez-vous peut-être un autre style lorsque le champ de saisie est ciblé?

3 Réponses :

2
votes

Je pense que vous devez utiliser la propriété: focus.

Alors comme ça:

input:focus {
   background: #161616;
}

1 commentaires

: active fonctionnera juste lorsque vous cliquerez sur l'entrée. après ça, ça va être pareil. : focus définit la règle css tant que l'entrée est focalisée

0
votes

Utilisez input: focus sous l'entrée pour écrire vos règles css pour le scénario de focus.

0 commentaires

2
votes

Vous pouvez utiliser input:focus pour garder l' background green - background green lors de la saisie. Assurez-vous que vous n'avez pas d'autre css qui remplace ce css.

Démo:

<form class="form">
  <input type="text" name="name" class="form__name" placeholder="Name*" />

  <input type="email" name="email" class="form__email" placeholder="Email*" />
</form>

input {
  width: 100%;
  color: white;
  border: none;
  border-bottom: 1px solid grey-light;
  outline: none;
  font-size: 1rem;
  margin-bottom: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: green;
}

input:focus {
  background: green;
}

0 commentaires