css - radio 输入检查的 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>

问题是radio input IS checked但是当页面重新加载过滤掉列表的时候标记没有出现。在图像上，您可以在代码中看到选中的选项在 radio 输入上，但预览上没有标记。

有谁知道为什么会发生这种情况？您可以在这里观看预览:

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

如果您在“Marcas”中测试任何其他选项，该标记在重新加载后会显示以过滤产品，但在“Aden + Anais”、“Babysec”和其他 radio 组中的选项的情况下， radio 重新加载集合页面时未标记。即使单选按钮具有选中的属性。任何想法为什么会发生这种情况？ :P

提前致谢。

Answer 1

好吧，感谢一个在 Facebook 上帮助过我的人，我找到了解决方法:P 他的建议是因为我使用自定义单选按钮 css，我可以用 .checked 类而不是 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" 添加到 checked radio 和 presto 的标签中。这是一个有点肮脏的解决方案，因为它允许 css “选择”两个单选按钮。如果您选择一个选项，然后在重新加载后选择另一个选项，则两个框都将显示为已选中。但是这个解决方案不会影响我使用的 Shopify Collection 的多个过滤器的功能，所以现在我会继续使用那个解决方案哈哈。

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

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

干杯!