CODEWITHSUNDEEP
htmlcssreactjsformsreact-bootstrap
Diana Shao
Diana Shao

Reputation: 61

Can I customize text color of a React-Bootstrap Form Control input textbox?

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:

enter image description here

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

current failed form color scheme

What I want it to look like:

enter image description here

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

Upvotes: 2

Views: 10372

Answers (2)

Supercosition
Supercosition

Reputation: 37

in CSS you can try something like "background-color", hope it helps

.form-control {
background-color: $white-bg;
border: 1px solid $light-gray;
border-radius: $border-radius-base;
font-size: 0.85rem;
color: #000000;
@include input-size($padding-base-vertical, $padding-base-horizontal - 4, 
$height-base);
@include box-shadow(none);

Upvotes: 0

Chaospyke
Chaospyke

Reputation: 62

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.

Upvotes: 2

Related Questions