<fieldset>
  <legend>Fruta favorita</legend>
  <input class="sr-only radio-input" id="radio" name="hc" type="radio">
  <label class="radio-label" for="radio">Manzana</label>

  <input class="sr-only radio-input" id="radio2" name="hc" type="radio">
  <label class="radio-label" for="radio2">Sandía</label>
</fieldset>

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  --check-size: 1.2rem;
  --check-active-bg: #232946;
  
  @media (forced-colors: active) {
    --check-active-bg: highlight;
  }
}

.radio-label {
  display: grid;
  grid-template-columns: var(--check-size) auto;
  gap: .5rem;
  margin-top: 1rem;
  
  &:before,
  &:after {
    grid-area: 1/1/1/1;
    place-self: center;
  }
  
  &:before {
    content: '';
    min-width: var(--check-size);
    min-height: var(--check-size);
    border: solid .1rem;
    border-radius: 50%;
  }
}

.radio-input {
  &:checked {
    + .radio-label {
      &:before {
        content: '';
        background: var(--check-active-bg);
        border-color: var(--check-active-bg);
      }
    }
  }
  
  &:focus + .radio-label {
    &:before {
      outline: solid .2rem #d4284d;
      outline-offset:.2rem;
    }
  }
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.