CSS Changes the color of selected dots in input[type=”radio”]

html

<div styleName="agreement">
  <input
    id="radio"
    checked
    type="radio"
  />
  <label htmlFor="radio"></label>
  <span styleName="agreementContent">I have read and agree with the<a href="#">xxxxxx</a>"</span>
</div>
Copy the code

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; } // When selectedlabelstyleinput:checked+label {
  width: 4vw;
  height: 4vw;
  background-color: #fff;
  border: 1px solid # 999; } // Select the contents of labEinput:checked+label::after {
  position: absolute;
  content: "";
  width: 2.5 vw;
  height: 2.5 vw;
  top: 0.5 vw;
  left: 0.5 vw;
  border-radius: 50%;
  background-color: #C8321F;
  border: 1px solid #C8321F;
}
Copy the code

Before the selected

After the selected