有没有办法在Shopify液体上的选定单选按钮上获得图像覆盖？

问题描述

客户机要我使在所选择的单选按钮的图像重叠，因此当小尺寸，例如，被选择的，而不是一个突出显示的按钮，并且图像将在其位置显示出来。参见下图。让我知道！！试图解决这个问题大约5天！谢谢。 enter image description here

解决方法

这看起来只需要一些聪明的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一起运行就可以完成的所有奇妙的事情放在一起：）

liquid shopify