Как управлять цветом поля ввода внутри формы в реакции?

Question

У меня есть поле для ввода текста внутри формы в моем приложении для реагирования, которое выглядит до щелчка:

После того, как я нажму внутриполе ввода выглядит следующим образом:

Я бы хотел, чтобы текстовое поле оставалось таким же сероватым цветом при нажатии вместо того, чтобы менять цвет на белый.Как мне этого добиться?Это то, что я до сих пор:

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);
}

<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>

Я проводил все эти тесты в Chrome, если это имеет значение.

Answer 1

Вы можете увидеть эту скрипку - Ссылка на скрипку

Вам нужно только применить CSS к вашему входному тегу.

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

Answer 2

В CSS :

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

Answer 3

используйте это.

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

выход:

Другой вариант - использовать это. но измените "className" на "class"

.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="" />

Answer 4

Решением было изменить поле type в моем input на «текст» вместо «поиск»:

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

Answer 5

Вы можете просто добавить

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

В ваш файл CSS.