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

【问题标题】：Can I customize text color of a React-Bootstrap Form Control input textbox?我可以自定义 React-Bootstrap 表单控件输入文本框的文本颜色吗？
【发布时间】：2020-09-28 03:31:39
【问题描述】：

我正在尝试使用 React-Bootstrap 表单元素在网站上创建表单，但我希望它与网站的当前配色方案相匹配。我能够将输入的背景颜色设置为所需的颜色（在 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;
}

原文：

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

我想要的样子：

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

【问题讨论】：

看代码，好像form-control的选择器类不正确，试试这个<Form.Control as="textarea" rows="4" placeholder="Type your message here..." style="background-color:#876f49;color:white;" />
我实际上使用的是 jsx，所以语法有点不同，但是当我使用 <Form.Control as="textarea" rows="4" placeholder="Type your message here..." style={{backgroundColor: "#876f49", color: "white"}}/> 时，它仍然显示与以前相同的内容。

标签： html css reactjs forms react-bootstrap

【解决方案1】：

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

CSS：

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

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

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

【讨论】：