Within my React app, there is a text input field situated inside a form that displays in its default gray color before any interaction:
https://i.stack.imgur.com/FdNos.png
Once the input field is clicked on, it changes to white as shown here: https://i.stack.imgur.com/SaWto.png
My goal is to maintain the initial grayish color of the text box even after it has been clicked. How can I accomplish this? Below is the code snippet I have so far:
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>All the testing has been carried out using Chrome browser, if that makes any difference.