无线电输入检查 CSS 不工作

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" 添加到选中的收音机的标签中，然后就可以了。这是一个有点肮脏的解决方案，因为它允许 css “选择”两个单选按钮。如果您选择一个选项，然后在重新加载后选择另一个选项，则两个框都将显示为选中状态。但是此解决方案不会影响我正在使用的 Shopify Collection 的多个过滤器的功能，所以现在我将继续使用该解决方案哈哈。

如果有人知道如果选中的单选按钮具有选中的属性，为什么不会显示为选中，我想听听这个假设哈哈。

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

干杯！