Spectrum CSS Radio Button Formatting When Clicked

Adobe XD
1

I’m trying to style a list of radio buttons so the labels appear to be clickable labels similar to what’s shown in this blog post, instead using Spectrum CSS: https://markheath.net/post/customize-radio-button-css

I’ve been able to get hover, active, and focus responses working, however I haven’t been able to get any formatting to change when the radio button is checked. I am able to read the selected values from the buttons so I know they have been checked.

I’m wondering if anyone else has gotten this to work? I’ve tried a handful of variations like the following examples which mimics what’s in the source css of the Adobe example site here: https://opensource.adobe.com/spectrum-css/radio.html

.spectrum-Radio:checked label {
    background-color: #bbb;
}

.spectrum-Radio input:checked label {
    background-color: #bbb;
}

.spectrum-Radio-input:checked {
    background-color: #bbb;
}

The following is what has worked for me with hover and focus:

.spectrum-Radio:hover label {
  background-color: #dfd;
}

.spectrum-Radio:focus label {
    border: 2px dashed #444;
}
2

I ended up figuring this out last night. This is what worked for me:

.spectrum-Radio-input:checked ~ .spectrum-Radio-label {
background-color: #bfb; border-color: #4c4;
}

1 Like