Question

我想知道是否有人可以帮助我，我在我的网站上为我的过滤器实现的单选按钮时遇到了一些麻烦。它是一个特殊的单选按钮CSS，这里是代码：

     /** radio buttons style **/
  input[type=checkbox]:not(old),
  input[type=radio   ]:not(old){
    width     : 2em;
    margin    : 0;
    padding   : 0;
    font-size : 1em;
    opacity   : 0;
  }
  input[type=checkbox]:not(old) + label,
  input[type=radio   ]:not(old) + label{
    display      : inline-block;
    margin-left  : -2em;
    line-height  : 1.5em;
  }
  input[type=checkbox]:not(old) + label > span,
  input[type=radio   ]:not(old) + label > span{
    display          : inline-block;
    width            : 0.875em;
    height           : 0.875em;
    margin           : 0.25em 0.5em 0.25em 0.25em;
    border           : 0.0625em solid rgb(192,192,192);
    border-radius    : 0.25em;
    background       : rgb(224,224,224);
    background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
    vertical-align   : bottom;
  }
  input[type=checkbox]:not(old):checked + label > span,
  input[type=radio   ]:not(old):checked + label > span{
    background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
    background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
    background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
    background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
    background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
  }
  input[type=checkbox]:not(old):checked + label > span:before{
    content     : '✓';
    display     : block;
    width       : 1em;
    color       : rgb(153,204,102);
    font-size   : 0.875em;
    line-height : 1em;
    text-align  : center;
    text-shadow : 0 0 0.0714em rgb(115,153,77);
    font-weight : bold;
  }
  input[type=radio]:not(old):checked + label > span > span{
    display          : block;
    width            : 0.5em;
    height           : 0.5em;
    margin           : 0.125em;
    border           : 0.0625em solid rgb(115,153,77);
    border-radius    : 0.125em;
    background       : rgb(153,204,102);
    background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
  }
  /** end radio buttons style **/

这是服务器端的HTML / Liquid代码：

{% assign current_tags_dc = current_tags | downcase %}
{% assign all_tags_dc = collection.all_tags | downcase %}
<!-- Heading -->
<h2>Marcas</h2>
<!-- Sidebar Menu -->
<ul class="clearfix filters list-unstyled my-list brand-list">
  <!-- {% assign marcas_tags = current_tags | downcase %}  {{ marcas_tags }} -->
  <li>
    <input class="coll-filter" id="marca-all" type="radio" name="marcas" value="" />
    <label for="marca-all"><span><span></span></span>&nbsp;Quitar Selección</label>
  </li>
  {% for product_vendor in collection.all_vendors %}
    {% assign tag = product_vendor | downcase %}
    {% if current_tags_dc contains tag %}
      <li>
        <input class="coll-filter" id="marca-{{ product_vendor | handle }}" type="radio" name="marcas" checked value="{{ product_vendor | handle }}" /> 
        <label for="marca-{{ product_vendor | handle }}" class="checked"><span><span></span></span>&nbsp;{{ product_vendor }}</label>
      </li>
    {% elsif all_tags_dc contains tag %}
      <li>
         <input class="coll-filter" id="marca-{{ product_vendor | handle }}" type="radio" name="marcas" value="{{ product_vendor | handle }}" /> 
         <label for="marca-{{ product_vendor | handle }}">
           <span><span></span></span>&nbsp;{{ product_vendor }}
         </label>
      </li>
    {% endif %}
  {% endfor %}
</ul>

问题是无线电输入已被检查，但重新加载页面以过滤掉列表时不会出现标记。在图像上，您可以在代码上看到选中的选项位于收音机输入上，但预览中没有标记。

有谁知道为什么会这样？您可以在此处观看预览：

http://bebe2go.myshopify.com/collections/panales-toallitas/aden-anais?preview_theme_id=143428481

如果您在“Marcas”中测试任何其他选项，则在重新加载后标记会显示以过滤产品，但在“Aden + Anais”，“Babysec”的情况下以及其他无线电组中的选项，收音机重新加载集合页面时未标记。即使单选按钮具有已检查的属性。任何想法为什么会这样？：P

提前致谢。

Answer 1

好吧，我发现了一个工作，感谢在Facebook上帮助我的人：P他建议的是因为我使用自定义单选按钮css我可以用.checked类而不是检查来瞄准无线电css单选按钮上的属性。所以解决方案看起来像这样：

 label.checked > span > span{
    display          : block;
    width            : 0.5em;
    height           : 0.5em;
    margin           : 0.125em;
    border           : 0.0625em solid rgb(115,153,77);
    border-radius    : 0.125em;
    background       : rgb(153,204,102);
    background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
  }

然后我所要做的就是将class="checked"添加到已检查的收音机和presto中的标签上。这是一个肮脏的解决方案，因为它允许css＆＃34;选择＆＃34;两个单选按钮。如果您选择一个选项，然后在重新加载后选择另一个选项，则将显示两个框都被选中。但是这个解决方案不会影响Shopify Collection Im使用的多个过滤器的功能，所以现在我会继续使用该解决方案哈哈。

如果有人知道为什么如果检查过的单选按钮没有被检查，如果它有被检查的属性，我想听听这个假设哈哈。

如果有任何人对此有任何疑问，我很乐意提供帮助：D

干杯！

无线电输入已检查CSS无效

1 个答案: