Question

我正在尝试对复选框输入进行样式化。除了CHECKED选项，其他所有东西都可以正常工作。 input:checked可以正常工作。...但是当我添加.filter__checkgroup::after时，什么也没发生。

CSS：

.filter__checkgroup input[type="checkbox"] { 
    opacity: 0;
    cursor: pointer;
    width: 50px;
}

.filter__checkgroup-title {
    padding-left: 6px;
}

.filter__checkgroup::before{
    position: absolute;
    margin-top: 5px;
    border-radius: 1px;
    width: 12px;
    height: 12px;
    border: 1px solid #999;
    content: "";
    cursor: pointer;
}


.filter__checkgroup::after {
    position: absolute;
    left: 37px;
    margin-top: 7px;
  height: 6px;
  width: 8px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  color: #d19b4d;
  transform: rotate(-45deg);
    cursor: pointer;
    content: "";
    opacity: 0;
}

.filter__checkgroup:hover::after {
  content: "";
    opacity: 100 !important;
}

input:checked + .filter__checkgroup::after {
  content: "" !important;
    opacity: 100 !important;
}

HTML：

<section id="premmerce_filter_filter_widget-3" class="widget widget_premmerce_filter_filter_widget">
    <div class="titulo-filtro"><span>SHOP BY</span></div>
<div class="filter filter--style-default" data-premmerce-filter="">

        <div class="filter__item filter__item--type-checkbox" data-premmerce-filter-drop-scope="">


            <div class="filter__header">
                <div class="filter__title">
                    Categoria                </div>

            </div>
            <div class="filter__inner  " data-premmerce-filter-inner="">

                <div class="filter__properties-list">
                    <div class="filter__properties-item ">
            <div class="filter__checkgroup" data-filter-control-checkgroup="">
                <div class="filter__checkgroup-body">
                    <div class="filter__checkgroup-link">
                        <input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-product_cat-blazers-e-jaquetas" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_product_cat=blazers-e-jaquetas&amp;query_type_product_cat=or">
                        <label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-product_cat-blazers-e-jaquetas"></label>
                        <label class="filter__checkgroup-title " for="filter-checkgroup-id-product_cat-blazers-e-jaquetas">
                            Blazers e Jaquetas                        </label>
                    </div>
                </div>
                <div class="filter__checkgroup-aside">
                                    <span class="filter__checkgroup-count">
                                        1                                    </span>
                </div>
            </div>
        </div>
                    <div class="filter__properties-item ">
            <div class="filter__checkgroup" data-filter-control-checkgroup="">
                <div class="filter__checkgroup-body">
                    <div class="filter__checkgroup-link">
                        <input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-product_cat-calcas" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_product_cat=calcas&amp;query_type_product_cat=or">
                        <label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-product_cat-calcas"></label>
                        <label class="filter__checkgroup-title " for="filter-checkgroup-id-product_cat-calcas">
                            Calças                        </label>
                    </div>
                </div>
                <div class="filter__checkgroup-aside">
                                    <span class="filter__checkgroup-count">
                                        1                                    </span>
                </div>
            </div>
        </div>
                    <div class="filter__properties-item ">
            <div class="filter__checkgroup" data-filter-control-checkgroup="">
                <div class="filter__checkgroup-body">
                    <div class="filter__checkgroup-link">
                        <input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-product_cat-sem-categoria" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_product_cat=sem-categoria&amp;query_type_product_cat=or">
                        <label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-product_cat-sem-categoria"></label>
                        <label class="filter__checkgroup-title " for="filter-checkgroup-id-product_cat-sem-categoria">
                            Sem categoria                        </label>
                    </div>
                </div>
                <div class="filter__checkgroup-aside">
                                    <span class="filter__checkgroup-count">
                                        13                                    </span>
                </div>
            </div>
        </div>
                    <div class="filter__properties-item ">
            <div class="filter__checkgroup" data-filter-control-checkgroup="">
                <div class="filter__checkgroup-body">
                    <div class="filter__checkgroup-link">
                        <input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-product_cat-shorts-saias" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_product_cat=shorts-saias&amp;query_type_product_cat=or">
                        <label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-product_cat-shorts-saias"></label>
                        <label class="filter__checkgroup-title " for="filter-checkgroup-id-product_cat-shorts-saias">
                            Shorts e saias                        </label>
                    </div>
                </div>
                <div class="filter__checkgroup-aside">
                                    <span class="filter__checkgroup-count">
                                        1                                    </span>
                </div>
            </div>
        </div>
    </div>
            </div>
        </div>

        <div class="filter__item filter__item--type-checkbox" data-premmerce-filter-drop-scope="">


            <div class="filter__header">
                <div class="filter__title">
                    Cor                </div>

            </div>
            <div class="filter__inner  " data-premmerce-filter-inner="">

                <div class="filter__properties-list">
                    <div class="filter__properties-item ">
            <div class="filter__checkgroup" data-filter-control-checkgroup="">
                <div class="filter__checkgroup-body">
                    <div class="filter__checkgroup-link">
                        <input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-cor-dourado" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_cor=dourado&amp;query_type_cor=or">
                        <label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-cor-dourado"></label>
                        <label class="filter__checkgroup-title " for="filter-checkgroup-id-cor-dourado">
                            Dourado                        </label>
                    </div>
                </div>
                <div class="filter__checkgroup-aside">
                                    <span class="filter__checkgroup-count">
                                        1                                    </span>
                </div>
            </div>
        </div>
                    <div class="filter__properties-item ">
            <div class="filter__checkgroup" data-filter-control-checkgroup="">
                <div class="filter__checkgroup-body">
                    <div class="filter__checkgroup-link">
                        <input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-cor-marrom" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_cor=marrom&amp;query_type_cor=or">
                        <label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-cor-marrom"></label>
                        <label class="filter__checkgroup-title " for="filter-checkgroup-id-cor-marrom">
                            Marrom                        </label>
                    </div>
                </div>
                <div class="filter__checkgroup-aside">
                                    <span class="filter__checkgroup-count">
                                        1                                    </span>
                </div>
            </div>
        </div>
                    <div class="filter__properties-item ">
            <div class="filter__checkgroup" data-filter-control-checkgroup="">
                <div class="filter__checkgroup-body">
                    <div class="filter__checkgroup-link">
                        <input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-cor-xadrez" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_cor=xadrez&amp;query_type_cor=or">
                        <label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-cor-xadrez"></label>
                        <label class="filter__checkgroup-title " for="filter-checkgroup-id-cor-xadrez">
                            Xadrez                        </label>
                    </div>
                </div>
                <div class="filter__checkgroup-aside">
                                    <span class="filter__checkgroup-count">
                                        1                                    </span>
                </div>
            </div>
        </div>
    </div>
            </div>
        </div>
            </div>
</section>

Answer 1

为了使input:checked + .filter__checkgroup::after工作，输入必须是.filter__checkgroup的同级，而是一个孩子。

在CSS中无法选择这种方式，但是您可以使用JS来做到这一点。喜欢：

var checks = document.querySelectorAll('.filter__checkgroup-control')

checks.forEach( function(el) {

  var root = el.closest('.filter__checkgroup')

  el.addEventListener('click', function() {
    root.classList.toggle("checked")
  })
})

.filter__checkgroup::after {
  content: "something";
  display: block !important;
  padding: 1em;
  background: blue;
  color: white;
  clear: both;
  opacity: 0;
}

.filter__checkgroup.checked::after {
  opacity: 1;
}

<div class="filter__properties-item">
  <div class="filter__checkgroup">
    <div class="filter__checkgroup-body">
      <div class="filter__checkgroup-link">
        <input class="filter__checkgroup-control" type="checkbox">
        <label class="filter__checkgroup-check"></label>
        <label class="filter__checkgroup-title">Dourado</label>
      </div>
    </div>
    <div class="filter__checkgroup-aside">
      <span class="filter__checkgroup-count">1</span>
    </div>
  </div>
</div>

输入：在元素不起作用后选中+

1 个答案: