# Spectrum CSS Radio Button Formatting When Clicked

**URL:** <https://forums.creativeclouddeveloper.com/t/spectrum-css-radio-button-formatting-when-clicked/4973>\
**Category:** Adobe XD\
**Tags:** spectrum\
**Created:** [July 20, 2022, 3:54am UTC](https://forums.creativeclouddeveloper.com/t/spectrum-css-radio-button-formatting-when-clicked/4973 "2022-07-20T03:54:52Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![danderson2692](https://avatars.discourse-cdn.com/v4/letter/d/0ea827/32.png) [@danderson2692](https://forums.creativeclouddeveloper.com/u/danderson2692)\
**Post date:** [July 20, 2022, 3:54am UTC](https://forums.creativeclouddeveloper.com/t/spectrum-css-radio-button-formatting-when-clicked/4973/1 "2022-07-20T03:54:52Z")

</div>

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](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](https://opensource.adobe.com/spectrum-css/radio.html)

```auto
.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:

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

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

```

---

<div class="post-metadata">

**Author:** ![danderson2692](https://avatars.discourse-cdn.com/v4/letter/d/0ea827/32.png) [@danderson2692](https://forums.creativeclouddeveloper.com/u/danderson2692)\
**Post date:** [July 26, 2022, 1:48pm UTC](https://forums.creativeclouddeveloper.com/t/spectrum-css-radio-button-formatting-when-clicked/4973/2 "2022-07-26T13:48:47Z")

</div>

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;  
}