css 修改 input[type="radio"]中 选中后的圆点颜色

html

<div styleName="agreement">
  <input
    id="radio"
    checked
    type="radio"
  />
  <label htmlFor="radio"></label>
  <span styleName="agreementContent">我已阅读并同意《<a href="#">xxxxxx</a>》</span>
</div>

css

input[type="radio"] {
  width: 4vw;
  height: 4vw;
  opacity: 0;
}

label {
  position: absolute;
  left: 4vw;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  border: 1px solid #999;
}
//选中后label样式
input:checked+label {
  width: 4vw;
  height: 4vw;
  background-color: #fff;
  border: 1px solid #999;

}
//选中后labe内的内容
input:checked+label::after {
  position: absolute;
  content: "";
  width: 2.5vw;
  height: 2.5vw;
  top: 0.5vw;
  left: 0.5vw;
  border-radius: 50%;
  background-color: #C8321F;
  border: 1px solid #C8321F;
}

选中前

选中后