Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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;}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading