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

我正在尝试使用React引导表单元素在网站上创建表单，但我希望它与网站的当前配色方案相匹配。我能够将输入的背景色设置为所需的颜色（使用CSS中的.form控件），但我似乎无法更改占位符文本的颜色，当前为灰色。此外，当我单击输入框时，整个文本框变为白色，并恢复为默认颜色方案。我曾尝试在CSS中设置Form.Control元素的“color”属性，但没有效果

这是我现在拥有的HTML和CSS，以及网站外观与我希望它外观的截图。如您所见，“color”属性不会更改文本颜色。在第一张图片中，我点击了最后一个文本框，显示了我恢复默认配色方案的意思

HTML:

原件：

尝试（我已单击最后一个文本框以显示它变成什么）：

我希望它看起来像什么：

---

是否有任何方法可以进一步自定义表单控件的颜色，或者我应该在没有引导的情况下创建自己的表单？

我有一个类似的项目，其中我使用了CSS的not psuedo类：

CSS:

---

在本例中，“非（活动）”将在未选择字段时更改颜色。当用户单击字段输入数据时，“焦点”将改变颜色。

查看代码，看起来

表单控件的选择器类不正确，请尝试此
我实际上使用的是jsx，因此语法有点不同，但当我执行
时，它仍然显示与以前相同的内容。
<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>

#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;
}

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

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