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

【问题标题】：How to manage color of input field within form in react?如何在反应中管理表单内输入字段的颜色？
【发布时间】：2019-07-08 02:47:52
【问题描述】：

我的 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 中进行所有这些测试。

【问题讨论】：

标签： html css forms input-field

【解决方案1】：

你可以添加

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

到你的 css 文件。

【讨论】：

这是我已经尝试过的，我应该添加到我的问题中。没用……

【解决方案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="" />

【讨论】：

在 react 中，我们使用 className 而不是 class。

【解决方案3】：

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

您只需在输入标签上应用 CSS。

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

【讨论】：

【解决方案4】：

在CSS中：

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

【讨论】：

在 react 中，我们使用 className 而不是 class。
他的问题中提到了。

【解决方案5】：

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

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

【讨论】：