css - 没有标签的纯 CSS 复选框按钮(jQuery 是一种可能的解决方案)

Question

我正在尝试替换一个复选框并将其变成一个按钮。我以前做过，但对于这个网站，我使用的是 Easy Digital Downloads Front End Submissions。我搜索了又搜索，还在网站上浏览了多个帖子。

我不知道这是怎么做出来的，但我似乎无法理解它，因为标签似乎是在课前出现的。它有这个我一直试图弄乱的 selectit 类，但无论我做什么，我都无法制作按钮。

当我尝试像 input[type=checkbox] + label 这样的东西时，它实际上并没有影响任何东西。其他示例是 .selectit input[type=checkbox]:before 这一个有效。以及 .selectit input:checked:after但同样，我似乎无法使用 + label 添加任何内容。

好吧，我可以做一个有悬停的，但不能做一个有选中状态和颜色变化的。

请注意，我无法更改任何 HTML。复选框的构建方式，我必须坚持， 所以我正在尝试制作一个纯 CSS 解决方案。 但我可以将 jquery 添加到页面中

这是复选框的 HTML。我真的只希望父复选框受到悬停和选中状态的影响。

<ul class="fes-category-checklist">
  <li id="download_category-156" data-open="false" style="display: list-item;"><label class="selectit"><input value="156" type="checkbox" name="download_category[]" id="in-download_category-156"> 2D Assets</label>
    <ul class="children">

      <li id="download_category-183" data-open="false"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> Motion Graphics</label></li>

      <li id="download_category-163" data-open="false"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> HDRI</label></li>

      <li id="download_category-162" data-open="false"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> Materials</label></li>

      <li id="download_category-161" data-open="false"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> Textures</label></li>
    </ul>
  </li>
</ul>

我希望有人能给出一些答案谢谢!

编辑

我被建议更新我的问题，因为我可以将 jquery 插入到页面中。虽然，这不是我自己的经验。

Answer 1

原创，无javascript，疯狂回答

你的问题是你不能选择一个元素的父元素，所以你不能说“如果这个框被选中，让它的父标签改变颜色”。遗憾的是，:has CSS 选择器不受任何支持，否则它可以拯救您。

但是。如果你疯了，并且当事情看起来不错时你讨厌它，你可以用轮廓和边距做一些疯狂的事情。这是 mucho janky 但它有点管用。有点。

您可以在此代码笔中使用它:https://codepen.io/anon/pen/WPQJgw

后续，不抓狂，用jQuery回答

好的，您的编辑说明您可以使用 javascript 或 jQuery。假设您已经在页面上加载了 jQuery，因为这样可以缩短代码。

Codepen 在这里: https://codepen.io/tobyinternet/pen/daYqJq

我会解释这里的内容。

您不能更改 HTML，但是(使用 javascript)您可以将类分配给元素。因此，首先，我们创建修改现有元素的类。

• 从列表项中删除元素符号
• 隐藏实际的复选框
• 将标签做成 block 状元素，并赋予它们颜色和悬停状态
• 创建一个样式来指示“按钮”何时被“选中”

然后我们使用 javascript 首先在页面加载时应用按钮样式，然后在单击元素时应用适当的选中/未选中样式。

这样做的目的是，如果用户不能(或不想)使用 javascript，他们只会看到复选框。仍然完全可用，便于访问。如果他们确实安装了 javascript，那么 ta-da!纽扣。

$(document).ready(function(){
  $('.fes-category-checklist, .fes-category-checklist .children').addClass('nolist');
  
  $('.selectit').addClass('checkbutton');
  
  $('.checkbutton').click(function(){
    if( $(this).children('input:checkbox').is(':checked') ) {
         $(this).addClass('ischecked');
    } else {
      $(this).removeClass('ischecked');
    }
  });  
  
});

.nolist {
  list-style: none;
}

.nolist li {
  margin: 20px 0;
}

.checkbutton {
  padding: 8px 20px;
  text-align: center;
  display: block;
  width: 140px;
  height: 30px;
  line-height: 30px;
  margin-right: -130px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: yellow;
  transition: all .2s;
  box-shadow: 0px 3px 8px rgba(50,50,50,.5);
}

.checkbutton:hover {
  background-color: #CCCC00;
}

.checkbutton:active {
  box-shadow: 0px 1px 2px rgba(50,50,50,.5);
}

.checkbutton input[type="checkbox"] {
  position: absolute;
  left: -99999px;
}

.ischecked {
  background-color: blue;
  color: white;
}

.ischecked:hover {
  background-color: lightblue;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="fes-category-checklist">
  <li id="download_category-156" data-open="false" style="display: list-item;"><label class="selectit"><input value="156" type="checkbox" name="download_category[]" id="in-download_category-156"> 2D Assets</label>
    <ul class="children">

      <li id="download_category-183" data-open="false"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> Motion Graphics</label></li>

      <li id="download_category-163" data-open="false"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> HDRI</label></li>

      <li id="download_category-162" data-open="false"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> Materials</label></li>

      <li id="download_category-161" data-open="false"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> Textures</label></li>
    </ul>
  </li>
</ul>