Question 211547 in Html Question posted in
Some basic documentation can be found here.

Html – Change color of button on selection

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.current buttons

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

2

Answers


  1. 0

    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;}
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search