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

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

解决方案是将我的 input 中的 type 字段更改为 "text" 而不是 "search":

 <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

你可以看到这个fiddle - Link to fiddle

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

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

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

How to manage color of input field within form in react?

html

css

forms

input-field