没有标签的纯CSS Checkbox按钮（jQuery是一种可能的解决方案）

Question

我正在尝试替换一个复选框，并使其变成一个按钮。我之前已经做过，但是对于此网站，我正在使用“简易数字下载”前端提交。我进行了搜索，也浏览了网站上的多个帖子。

我不知道这是怎么做的，但是由于标签似乎在上课之前，我似乎无法将其包裹住。我一直在尝试使用这个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>

我希望有人能提供一些答案 谢谢！

EDIT

建议我更新我的问题，因为我可以将jquery插入页面。虽然，这并不是我对自己有很多经验。

Answer 1

原文，没有javascript，疯狂的答案

您的问题是您无法选择元素的父级，因此不能说“如果选中此框，则使其父级标签更改颜色”。遗憾的是，:has CSS选择器不受任何支持，否则可能为您省钱。

但是。如果您疯了，并且当事情看起来不错时就讨厌它，则可以使用轮廓和边距来做一些疯狂的事情。这是 mucho janky ，但确实可行。金达。

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

后续，非疯狂，使用jQuery答案

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

在此处进行简笔画：https://codepen.io/tobyinternet/pen/daYqJq

我将解释这里的情况。

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

• 从项目列表中删除项目符号
• 隐藏实际的复选框
• 使标签成为块元素，并为其赋予颜色和悬停状态
• 创建样式以指示何时“选中”“按钮”

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

以这种方式进行操作的目的是，如果用户不能（或不想）使用javascript，他们只会看到复选框。仍然完全可用，可访问性良好。如果他们 do 已经安装了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>