我可以自定義 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)”就會更改顏色。 當用戶單擊字段輸入數據時，“焦點”將改變顏色。