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

Question

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

这是我现在拥有的 HTML 和 CSS，以及网站外观与我想要的外观的屏幕截图。 如您所见，“颜色”属性不会更改文本颜色。 在第一张图片中，我单击了最后一个文本框，以显示恢复为默认配色方案的含义。

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

原来的：

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

我希望它看起来像什么：

有什么方法可以进一步自定义表单控件 colors，还是应该在没有 Bootstrap 的情况下制作自己的表单？

Answer 1

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

CSS：

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

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

在此示例中，只要未选择字段，“not(active)”就会更改颜色。 当用户单击字段输入数据时，“焦点”将改变颜色。