it is not because of dynamic ‘checked’ attribute. just try to apply the radio button input style using :after pseudo class. It will work.

From what I can see your React code seems to be okay… this is a CSS problem with radio button and its problem of accepting a background color change. What can be done with radio buttons is changing the accent-color from what I remember.

This is practically impossible and even if you were able to work something out, chances are it will work on some browsers and not on others.

But still, I think you can try something as simple as the one below.

div {
  margin:10px;
}

.radio-btn:checked + label {
  color: blue;
}

<div>
  <input type="radio" class="radio-btn" id="1" value="1" name="radbtn"/> <label for="1">Radio Option 1</label><br/>
<input type="radio" class="radio-btn" id="2" value="2" name="radbtn"/> <label for="2">Radio Option 2</label><br/>
<input type="radio" class="radio-btn" id="3" value="3" name="radbtn"/> <label for="3">Radio Option 3</label>
</div>

Take a look and see if it can work for you.

Can you try using the computed style property and apply styles accordingly?
For instance

<div className="answer3 col-sm">
  <label>
    <input
      className={value ?  'some-checked-class' : ''}
      type="radio"
      id="answer1"
      name="answer"
      value={value}
      checked={this.state.selectedOption === 'A'}
      onChange={this.onValueChange}
    />
    <img src="./images/answer1.png" alt="answer A" />
  </label>
</div>

I have a component with four radio inputs in a group. One of them is written as such:

<div className="answer3 col-sm">
              <label>
                <input
                  type="radio"
                  id="answer1"
                  name="answer"
                  value="A"
                  checked={this.state.selectedOption === "A"}
                  onChange={this.onValueChange}
                />
                <img src="./images/answer1.png" alt="answer A" />
              </label>
            </div>

The onChange method works to update the state, and I console log the input that is currently checked’s value and it shows the value correctly. I have a style applied to radio buttons that are checked, basically changing the border, and it isn’t being applied.
The style (just to test) is as such:

input[type="radio"]:checked {
  background-color: rgb(117, 17, 17);
}

Is this because the “checked” attribute is being added dynamically, bypassing CSS’s ability to apply styles appropriately?