改变 React-Bootstrap Form.Control 元素的颜色

Question

我正在尝试将 Form.Control 的样式从默认绿色选中更改为 #2196F3。

我尝试了几种方法，但似乎没有任何改变。 我得到的最接近的是：

CSS：

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

反应：

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

这实际上并没有改变颜色。 它确实出现在 Chrome 的开发人员工具中，但它仍然显示为绿色。 我无法弄清楚绿色来自哪里。 有任何想法吗？

Answer 1

因为单选按钮是一个原生元素，你不能直接改变它的颜色/样式。 尝试使用:after覆盖单选按钮样式，如下所示

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

Answer 2

对于 react-bootstrap:1.6.1 - 你应该：

1. 将“自定义”道具添加到 Form.Check。

2. 更改边框颜色和背景颜色

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

例如：

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

然后你可以在开发工具中看到 .custom-control-input:checked ~ .custom-control-label::before

Answer 3

当您在 form.Control 上提供 className 并尝试应用自定义 CSS 时，它可能不起作用。请尝试在 form.Control 上使用 id 而不是 className 来应用自定义 CSS

#form_control{
    background: rgba(0, 0, 0, 0.261);
}