我可以自定义 React-Bootstrap 表单控件输入文本框的文本颜色吗？

Question

I am trying to create a form on a website using React-Bootstrap Form elements, but I want it to match the current color scheme of the website. I was able to make the background color of the inputs the desired color (using.form-control in CSS), but I can't seem to change the placeholder text color, which is currently gray. Additionally, when I click on the input box, the whole text box becomes white and reverts to the default color scheme. I have tried setting the 'color' property of the Form.Control elements in CSS, but to no avail.

Here is the HTML and CSS I have right now, and a screenshot of what the website looks like vs. what I want it to look like. As you can see, the 'color' property isn't changing the text color. In the first picture, I have clicked into the last text box to show what I mean by reverting to the default color scheme.

HTML:

<Form id="contact-form">
  <Form.Group controlId="formBasicName">
    <Form.Control type="name" placeholder="Name" />
  </Form.Group>
  <Form.Group controlId="formBasicEmail">
    <Form.Control type="email" placeholder="Email" />
  </Form.Group>
  <Form.Group controlId="formBasicSubject">
    <Form.Control type="subject" placeholder="Subject" />
  </Form.Group>
  <Form.Group controlId="exampleForm.ControlTextarea1">
    <Form.Control as="textarea" rows="4" placeholder="Type your message here..." />
  </Form.Group>
  <Button id="submit-button" variant="light" type="submit">
    Submit
  </Button>
</Form>

CSS:

#contact-form {
  margin: 20px;
  width: 800px;
}

.form-control {
  height: 50px;
  border-radius: 0;
  background-color: #876f49;
  color: white;
  border-color: white;
  border-width: 1.3px;
}

Original:

Attempt (I have clicked into the last text box to show what it turns into):

What I want it to look like:

Is there any way I can further customize the Form Control colors, or should I just make my own form without Bootstrap?

Answer 1

I have a similar project in which I made use of CSS's not psuedo-class:

CSS:

   .form-control:not(active){
      color:white;
   }

   .form-control:focus{
      color:black;
   }

In this example the 'not(active)' will change the color whenever the fields are not selected. The 'focus' will change the color when a user clicks on the field to enter data.