更改选中时看起来像按钮的复选框的背景颜色答案

【问题标题】：Change background color of the checkbox which looks like a button when checked更改选中时看起来像按钮的复选框的背景颜色
【发布时间】：2021-05-11 08:10:02
【问题描述】：

我正在尝试创建一个看起来像按钮的复选框，我能够完成它，但我遇到的唯一问题是我无法在选中按钮时更改按钮的背景颜色。目前，当我选中复选框时，按钮变为浅灰色，我希望它为蓝色，这是我的 HTML 和 CSS 的 sn-p。任何帮助表示赞赏，在此先感谢

.checkboxes{
  cursor: pointer;
  z-index: 90;
  text-align: center;
  font-family: "Arial";
  font-weight: bold;
  font-size: 16px;
  color: #235988;
  width: 270px;
  margin: 5px;
  border-radius: 0px !important;
  border: 1px solid #235988 !important;
  padding-bottom: 5px;
 }

 .checkboxes:hover{
   background: #235988 !important;
   color: #FFF !important;
  }

  .form-check label input[type="checkbox"]:checked{
    background: #235988;
    color: #FFF;
  }


.form-check label input[type="checkbox"] {
  opacity:0;
}

<div class="col-md-12 form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons">
<label for="checkbox_select" class="col-md-3"> Please select one or many checkboxes </label>
      <div class="col-md-7">
        <label class="btn btn-default checkboxes">
          <input type="checkbox" name="checkbox_select" value = "1" class = "form-check list-group-item" id = "checkbox_select0" >  Checkbox1
        </label>
        <label class="btn btn-default checkboxes">
          <input type="checkbox" name="checkbox_select" value = "2" class = "form-check list-group-item" id = "checkbox_select1" >  Checkbox2
        </label>
        <label class="btn btn-default checkboxes">
          <input type="checkbox" name="checkbox_select" value = "3" class = "form-check list-group-item" id = "checkbox_select2" >  Checkbox3
        </label>
</div>

【问题讨论】：

可能对你有用jsfiddle.net/kohansalism/w4u8tdca
这对我不起作用，因为标签由 btn-default 类组成，即使我添加 !important 它也不会覆盖。使用 fiddel 它只为我将文本跨度包装成蓝色，而不是按钮

标签： html css button checkbox

【解决方案1】：

您需要将您的输入作为兄弟放在标签之外（因为我们将使用 Adjacent sibling combinator ）并使用 "for" attributer

.checkboxes{
  cursor: pointer;
  z-index: 90;
  text-align: center;
  font-family: "Arial";
  font-weight: bold;
  font-size: 16px;
  color: #235988;
  width: 270px;
  margin: 5px;
  border-radius: 0px !important;
  border: 1px solid #235988 !important;
  padding-bottom: 5px;
 }

.checkboxes:hover,
  .form-check input[type="checkbox"]:checked + label{
    background: #235988;
    color: #FFF;
  }


.form-check input[type="checkbox"] {
  opacity: 0;
}

<div class="col-md-12 form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons">
<label for="checkbox_select" class="col-md-3"> Please select one or many checkboxes </label>
      <div class="col-md-7">
        <input id="checkbox-1" type="checkbox" name="checkbox_select" value = "1" class = "form-check list-group-item" id = "checkbox_select0" >
        <label class="btn btn-default checkboxes" for="checkbox-1">
            Checkbox1
        </label>
        <input id="checkbox-2" type="checkbox" name="checkbox_select" value = "2" class = "form-check list-group-item" id = "checkbox_select1" >
        <label class="btn btn-default checkboxes" for="checkbox-2">
            Checkbox2
        </label>
         <input id="checkbox-3" type="checkbox" name="checkbox_select" value = "3" class = "form-check list-group-item" id = "checkbox_select2" >
        <label class="btn btn-default checkboxes" for="checkbox-3">
           Checkbox3
        </label>
</div>

【讨论】：

当我尝试这个时，我根本无法选中复选框，只能将其悬停但是当我单击它时，它不会被选中。我确保使用带有标签的 for 属性并将其与复选框 id 链接，但仍然相同
@MohammedSayer 你能提供一个链接到你的小提琴或它不起作用的网页吗？

【解决方案2】：

我认为有很多解决方案。我只向您介绍其中之一。

通过设置 css display 属性 none 来隐藏 iuput。
让切换按钮看起来像 span 或 div 元素。
在 div 元素 onclick 属性上附加 js 函数。函数切换隐藏 iuput 元素的选项。

但我认为更多的方式是使用一些火焰，如Vue，Angular等。

【讨论】：

我想用css来做