有没有办法在 Shopify (Liquid) 上的选定单选按钮上获得图像叠加？

Question

客户端希望我在所选的单选按钮上进行图像叠加，因此当大小为小时，例如，选择尺寸，而不是突出显示的按钮，而且图像将显示在其位置。见下图。让我知道！！ 5天来一直试图解决这个问题！谢谢。 enter image description here

Answer 1

这看起来只需要一点巧妙的 HTML/CSS 结构。

例如：

.product-option{
  position: relative;
  display: inline-block;
}

.product-option__input{
  display: none;
}


.product-option__label{
  padding: 0.25em 1.5em;
  display: inline-block;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 4px;
}

.product-option__input:checked ~ .product-option__label{
  /* Some nice styles to highlight the selected option? */
  background-image: url('/some-nice-background.png');
  color: transparent; /* If you want to make the text go away for some reason? */
  border-color: darkgreen;
  /* Etc. */
}

.product-option__input:checked  ~ .product-option__label:after{
  /* Maybe we want something that we can position independently? */
  position: absolute;
  content: '';
  border: 2px solid green;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: linear-gradient(-0.125turn, green, lightgreen);
}  

<!--
In Liquid, this HTML would be generated with a forloop similar to the following:

{% for option in product.options_with_values %}
  <div class="product-option-wrapper">
  {% for value in option.values %}
    {% assign unique_option_id = 'option_' | append: product.id | append: '-' | append:  option.position | append: '-' | append: forloop.index %}
    
    <div class="product-option>
      <input class="product-option__input" id="{{ unique_option_id }}" name="{{ option.name }}" value="{{ value | escape }}" {% if value == option.selectd_value %}checked{% endif %} />
      <label class="product-option__label" for="{{ unique_option_id }}">
        <span class="product-option__text">{{ value }}</span>
      </label>
    </div>
    
  {% endfor %}
  </div>
{% endfor %}
-->

<div class="product-option">
  <input class="product-option__input" id="option1-small" type="radio" name="option1" value="small"/>
  <label class="product-option__label" for="option1-small">
    <span class="product-option__text">Small</span>
  </label>
</div>
<div class="product-option">
  <input class="product-option__input" id="option1-med" type="radio" name="option1" value="med"/>
  <label class="product-option__label" for="option1-med">
    <span class="product-option__text">Med</span>
  </label>
</div>
<div class="product-option">
  <input class="product-option__input" id="option1-lg" type="radio" name="option1" value="lg"/>
  <label class="product-option__label" for="option1-lg">
    <span class="product-option__text">Large</span>
  </label>
</div>
<!-- etc -->

这应该足以让您开始并让您的想象力尽情发挥，只需一些简单的 HTML/CSS 一起运行就可以完成所有很酷的事情:)