I am trying to change the styling of Form.Control when checked from the default green to #2196F3.

I have tried a few ways and nothing seems to change it. The closest I have gotten is:

CSS:

.col input[type="radio"]:checked {
    background-color: #2196F3;
}

React:

<Col>
    <Form.Check type='radio' label='No Unsubs' onChange={() => this.handleRadio('false')} checked={this.state.unsub === 'false'}/>
</Col>

This does not actually change the color though. It does show up in Chrome's developer's tools, but it still shows as green. I can not figure out where the green es from. Any ideas?

I am trying to change the styling of Form.Control when checked from the default green to #2196F3.

I have tried a few ways and nothing seems to change it. The closest I have gotten is:

CSS:

.col input[type="radio"]:checked {
    background-color: #2196F3;
}

React:

<Col>
    <Form.Check type='radio' label='No Unsubs' onChange={() => this.handleRadio('false')} checked={this.state.unsub === 'false'}/>
</Col>

This does not actually change the color though. It does show up in Chrome's developer's tools, but it still shows as green. I can not figure out where the green es from. Any ideas?

• javascript
• css
• reactjs
• react-bootstrap

Share Improve this question Follow asked Jan 22, 2020 at 20:06 zboyerzboyer 2111 silver badge22 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

For react-bootstrap:1.6.1 - You should :

1. Add "custom" props to Form.Check.

2. Change border-color and background-color in

   .custom-control-input:checked ~ .custom-control-label::before

For example:

<F.Form.Check
  custom 
  checked={true}
  type='radio'
  key={id}
  label={
    <div className={`document-name ${className}`}>{`${documentName} ${fullName}`}
      <div className={`issuer-name ${className}`}>{issuerName}</div>
    </div>
  }
/>

Then you can see .custom-control-input:checked ~ .custom-control-label::before in dev tools

Because the radio button is a native element , you can't change its color/style directly. Try to overlay the radio button style using :after, something like below

input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #e6f7e6;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid rgb(157, 194, 241);
}

input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #e6f7e6;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid rgb(131, 240, 42);
}

It may not work when you give className on the form.Control and try applying custom CSS. Please trying applying custom CSS using id on form.Control instead of className

<Form.Control
          placeholder="Mobile number or email address"
          className="facebook_inputs"
          id="form_control"
          type="text"
        />
#form_control{
    background: rgba(0, 0, 0, 0.261);
}

now we can see the given background color applied on that input field