Change color of button on selection

Question

I currently have two buttons that have a black border, white background and black text (see image). I would like to edit these buttons so that when one is selected it changes to a black background with white text.

This is the current code I have for these buttons:

Liquid/JS

<fieldset class="js product-form__input">
                            <legend class="form__label" id="option-{{ option.name | handle }}">Select Your {{ option.name }}: <span id="selected-{{ option.name | handle }}">{{ option.selected_value }}</span></legend>
                            <div class="size-buttons" style="margin-bottom: 35px;">
                              {%- for value in option.values -%}
                                {%- assign variant = product.variants | where: option.name, value | first -%}
                                <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="size-button">
                                  <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                                        name="{{ option.name }}"
                                        value="{{ value | escape }}"
                                        form="{{ product_form_id }}"
                                        {% if option.selected_value == value %}checked{% endif %}
                                        onchange="updateSelectedValue('{{ option.name | handle }}', '{{ value | escape }}')"
                                  >
                                  <span>{{ value }}</span>
                                </label>
                              {%- endfor -%}
                            </div>
                          </fieldset>
                    
                    <script>
                      function updateSelectedValue(optionName, selectedValue) {
                        document.getElementById('selected-' + optionName).textContent = selectedValue;
                      }
                    </script>

CSS:

.size-button {
  background-color: white;
  color: black;
  border: 1px solid black;
  margin-right: 20px;
  padding: 10px 30px;
  cursor: pointer;
}

Duplicated question (https://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label) — anom907 zat, Jul 19 '23 at 20:20
Or if you don't want to go and check, just use the :checked property — anom907 zat, Jul 19 '23 at 20:21

score 3 · Accepted Answer · answered Jul 19 '23 at 20:25

You're looking for the :checked selector when styling a radio buttons selected option

.size-button input[type="radio"]:checked {
 background-color: black;
 color: white;
 border: 1px solid black;
 margin-right: 20px;
 padding: 10px 30px;
 cursor: pointer;}

score 0 · Answer 2 · answered Jul 19 '23 at 20:47

As mentioned in other answers, you can use :checked pseudo-class selector because it is automatically applied to the input[type=radio]. I would only suggest you to use :has selector in your CSS in order to style the parent element(label).

.size-button:has(input:checked) {
  background-color: black;
  color: white;
}

Change color of button on selection

2 Answers2