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

I am trying to create a checkbox which looks like a button, I am able to get it done but the only problem I am having is I am not able to change the background color of the button when it's checked. Currently when I check the checkbox the button becomes light- grey I want it to be blue, here is the snippet of my HTML and CSS. Any help is appreciated, Thanks in advance

HTML :

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

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;
}