没有标签的纯 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，但它有点工作。有点。

您可以在这个 codepen 中使用它：https://codepen.io/anon/pen/WPQJgw

跟进，不疯狂，使用jQuery回答

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

在这里编写代码： https://codepen.io/tobyinternet/pen/daYqJq

我会解释这里发生了什么。

您无法更改 HTML，但（使用 javascript）您可以将类分配给元素。所以首先，我们创建修改现有元素的类。

• 从列表项中去掉项目符号
• 隐藏实际的复选框
• 将标签制作成块元素并赋予它们颜色和悬停状态
• 创建样式以指示“按钮”何时被“选中”

然后我们使用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>