1
votes

Comment gérer la couleur du champ de saisie dans le formulaire dans React?

J'ai un champ de saisie de texte dans un formulaire de mon application react qui ressemble à ceci avant d'être cliqué sur:

Après avoir cliqué dans le champ de saisie, cela ressemble à ceci:

Je voudrais que la zone de texte reste la même couleur grisâtre lorsque vous cliquez dessus au lieu de passer au blanc. Comment puis-je atteindre cet objectif? Voici ce que j'ai jusqu'à présent:

<form onSubmit={this.spinSubmit}>
  <div className="input-field container main-search">
    <input className="main-search-input-field" id="search" type="search" placeholder="Search..." value={this.state.searchQuery} onChange={this.handleChange} />
    <button id="btn-submit-search"><i className="material-icons">search</i></button>
  </div>
</form>

html,
body {
  height: 100%;
  margin: 0;
  background: rgb(105, 103, 116);
}

.main-search {
  position: relative;
  margin-bottom: 10px;
  border-radius: 5px;
}

.main-search:hover {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
}

J'ai fait tous ces tests dans Chrome si cela fait une différence.

html css input-field forms

0 commentaires

5 Réponses :

0
votes

Vous pouvez simplement ajouter

.main-search-input-field {
    background-color: gray;
}

À votre fichier css.

1 commentaires

C'est quelque chose que j'avais déjà essayé et j'aurais dû ajouter à ma question. Ça ne marche pas ...

0
votes

utilisez ceci.

.main-search-input-field, textarea {
  background-color :rgb(105, 103, 116);
  border:0px;
}

 <input class="main-search-input-field" id="search" type="search" placeholder="Search..." value="search" onChange="" />

sortie:

Une autre option consiste à utiliser ce. mais remplacez "className" par "class"

input[type="search"], textarea {    
  background-color :rgb(105, 103, 116);
  border:0px;    
}

1 commentaires

Dans react, nous utilisons className au lieu de class.

0
votes

La solution était de changer le champ type dans mon entrée en "texte" au lieu de "recherche":

 <input className="main-search-input-field" id="search" type="text" placeholder="Search..." value={this.state.searchQuery} onChange={this.handleChange} />

0 commentaires

0
votes

Dans CSS

#search{
background: rgb(105, 103, 116);
}

2 commentaires

Dans react, nous utilisons className au lieu de class.

C'est mentionné dans sa question.

0
votes

Vous pouvez voir ce violon - Lien vers le violon

Il vous suffit de appliquez le CSS sur votre balise d'entrée.

input[type="search"] {    
 background-color :rgb(105, 103, 116);
 border:0px;
 border-bottom:1px solid #ccc;
}

0 commentaires