Tips on controlling the color of an input field in a form using React

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.

htmlcssformsinput-field

Answer №1

All you have to do is include

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

In your stylesheet.

Answer №2

implement this.

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

result:

https://i.stack.imgur.com/ZTUs1.png

Another possibility is to utilize this. however, update "className" to "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

To view the demonstration, check out this fiddle - Visit the fiddle here

All you have to do is add CSS styling to your input element.

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

Answer №4

When it comes to styling with CSS:

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

Answer №5

To resolve the issue, I adjusted the type attribute within my input tag to "text" rather than "search":

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a text field on top of a div based on the dropdown value selection

I am working with a dropdown option inside a div. I want to make it so that when the last option is selected, a text box will appear on top of the dropdown. And when a different option is selected, the text box should be disabled. How can I achieve this? ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Mastering the art of reading rows in ASP.NET using Java Script

Within the code snippet below, you'll find an image located in the second column. Clicking on this second column should allow me to access the data stored in the first column. Let's say we have a table with 10 rows. If the user clicks on the ico ...

javascriptjqueryhtmlasp.netcss

CSS background property does not function properly if the URL contains brackets

Here is the URL for an image I am working with: URL: Currently, I am having an issue in my CSS: background: url(http://www.andrearosseti.cl/image/cache/data/New%20Coleccion/Planas/SWEET-5-TAUPE-(1)-340x340.jpg) The problem arises due to the presence of ...

cssruby-on-railssass

Gatsby: A guide on inserting unadulterated HTML within the head section

Is it possible to insert raw HTML into the <head></head> section of every page in a Gatsby.js project? I need to add a string of HTML for tracking purposes, including inline and external script tags, link tags, and meta tags. For example, here ...

javascripthtmlreactjsgatsbytracking

Clicking on the Edit button does not result in any changes to the HTML on the page following a table

My current setup involves a button that is supposed to toggle between 'Add New User' and 'Update User' elements when clicked. However, it seems to work only when the table has not been filtered. Once I apply any kind of filtering on the ...

javascriptjqueryhtml

Make sure the division remains fixed even when the window is resized

Having a fixed position and bottom set to 0, I want my div to display at the bottom of the window. The issue arises when the window is resized, causing the div to move up and into other elements. For instance, when opening the console box in Chrome, the f ...

javascriptjqueryhtmlcss

Identifying when a user is idle on the browser

My current project involves developing an internal business application that requires tracking the time spent by users on a specific task. While users may access additional pages or documents for information while filling out a form, accurately monitoring ...

javascripthtmlbrowserwebbrowser-control

Homepage featuring a stacked image background similar to Kickstarter

I am trying to replicate the stacked image effect seen on kickstarter.com. However, I am facing an issue where the images do not overflow on the screen as desired. The arrow indicates the area that needs to be filled with the image. Check out the image he ...

htmlcss

Problem with holding a dropdown button

Having trouble maintaining the position of this button within the floating button holder above my website content. How can I incorporate a drop-down menu while ensuring it stays within the same button holder? .btn-holder { backgr ...

css

What is causing the action button in my MUI snackbar to occupy an additional line?

I'm currently learning how to use MUI and I'm struggling with a specific issue. The close button in my code is appearing on a separate line, but I want it to be on the same line as the word "again". I've tried experimenting with absolute pos ...

cssreactjsmaterial-uijsxsnackbar

Ensuring the next tab is not accessible until all fields in the current tab are filled

I am working on a form with a series of questions displayed one at a time, like a slide show. I need help with preventing the user from moving to the next set of questions if there is an empty field in the current set. Below is the script I am using to nav ...

javascriptjqueryhtml

The functionality of the controls is not functioning properly when attempting to play a video after clicking on an image in HTML5

While working with two HTML5 videos, I encountered an issue with the play/pause functionality. Despite writing Javascript code to control this, clicking on one video's poster sometimes results in the other video playing instead. This inconsistency is ...

javascriptjqueryhtmlvideo

Basic title in material-ui navigation bar

I was hoping to display a simple label on the right side of the AppBar. Currently, I am using the iconElementRight prop and inserting a disabled flat button: <AppBar iconElementRight={<FlatButton label="My Label" disabled={true}/>} /> Thi ...

cssmaterial-ui

"Optimizing XSL stylesheets by implementing conditional row styles to prevent redundant

Is there a way to display rows that are older than 2 years from today in bold without repeating the code? I know the condition I need, but I'm struggling with avoiding duplicating all the code just for a different style. This is the code I have: & ...

cssxslthtml-tablexslt-1.0

Delete the top row from the table

After extensive searching on various websites, I am still unable to resolve my html or CSS issue. An unexpected line is appearing above the table here. Here's the code snippet that is causing trouble: <table border="0" width="840" cellspacing="0" ...

htmlcsshtml-table

Managing images in JavaScript while conserving memory

Welcome I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px. My vision involves creating a captivating visual experience for users as t ...

javascriptjqueryhtmlcssoptimization

Inserting information into a SQL database using PHP

Looking for some assistance here. I've double-checked the SQL table names multiple times, but whenever I try to post, I keep getting an error. I'm fairly new to this, so any help would be greatly appreciated. Thanks in advance. require_once(&ap ...

phphtmlsql

When attempting to access the callback response with HTML tags from the server, the AJAX request in jQuery fails

I am currently facing a challenge while working on an ajax form submission that returns Json response. Everything functions smoothly except for a specific situation where I need to include HTML content in the response, such as a URL link for users to acces ...

jqueryhtmlajax

Numerous websites with scroll-based navigation

I am currently building a unique website that includes scrolling in various directions without the use of a horizontal scrollbar. The design is similar to this image: https://i.stack.imgur.com/Ex2Bf.jpg. It is a one-page website where vertical scrolling ...

jqueryhtmlcssscroll

Tips for incorporating Javascript in an innerHTML inline css situation

I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...

javascriptphphtmlcss