如何在反应中管理表单内输入字段的颜色？

Question

在我的react应用程序的表单中，我有一个文本输入字段，在被点击之前看起来像这样：

在输入字段中单击后，它看起来像这样：

我希望文本框在单击时保持相同的灰色，而不是变为白色。我该如何实现？这是我到目前为止的内容：

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

您可以添加

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

到您的CSS文件。

Answer 2

使用它。

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 3

解决方案是将我的type中的input字段更改为“文本”，而不是“搜索”：

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

Answer 4

在 CSS 中：

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

Answer 5

您可以看到这个小提琴-Link to fiddle

您只需要在输入代码上应用CSS。

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