css - 改变单选按钮的颜色

Question

radio buttonn默认的CSS代码中，未选中时为灰色，选中时为蓝色:

但是我需要它在两种状态下都是黑色的。因此，我为单选按钮覆盖了 SCSS。这是我的代码:

HTML:

     <div class="col-md-2 col-sm-6">                
        <div class="row">
          <div class="col-md-12">
            <label>Earlier experience in this field?</label>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="radio">
              <label><input type="radio" formControlName="earlierExperience" value="1">Yes</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="radio">
              <label><input type="radio" formControlName="earlierExperience" value="0">No</label>
            </div>
          </div>
        </div>
      </div>

CSS:

input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: -2px;
  left: -1px;
  position: relative;
  background-color:white;
  display: inline-block;
  visibility: visible;
  border: 1px solid black;
}

input[type='radio']:checked:after {
  border: 4.5px solid black;  
}

此代码的问题是选中按钮中间的小圆圈不再显示:

你能帮我吗？

Answer 1

您可以使用新属性 accent-color设置输入的颜色。 Broswer 支持目前仅限于 Chrome 和 Firefox，因此您将为其他浏览器创建后备。

input {accent-color: black;}

input {
  accent-color: black;
}

    <div class="col-md-2 col-sm-6">                
        <div class="row">
          <div class="col-md-12">
            <label>Earlier experience in this field?</label>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="radio">
              <label><input type="radio" formControlName="earlierExperience" value="1">Yes</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="radio">
              <label><input type="radio" formControlName="earlierExperience" value="0">No</label>
            </div>
          </div>
        </div>
      </div>