如何解决有没有办法在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一起运行就可以完成的所有奇妙的事情放在一起:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。