更改复选框的背景颜色，选中时看起来像一个按钮

Question

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

.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>

Answer 1

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

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

但我认为更 ez 的方法是使用一些 flamework，比如 Vue，Angular，等等。

Answer 2

您需要将您的输入作为同级放在标签之外（因为我们将使用 Adjacent sibling combinator ) and use the "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>

更改复选框的背景颜色，选中时看起来像一个按钮

Change background color of the checkbox which looks like a button when checked

html

css

checkbox

button