Change the label when a checkbox is checked

I want to implement a static checkbox (without query/script/function) like this:

By clicking the checkbox box, it should change to that brown color (like the name box), and by clicking again it goes to normal (like price)

my code:

.checkbox-round {
  width: 45px;
  height: 30px;
  /*background-color: white !important;*/
  border-radius: 5px !important;
  /*background-color: white;*/
  vertical-align: middle;
  /*border: 3px solid #ddd;*/
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

.checkbox-round:checked {
  background-color: #A97B47 !important;
}

<label>
<input id="filterByName" type="checkbox" checked class="col-md-4 col-sm-6 col-12 button checkbox-round" name="filterByName"  value="name" placeholder="name">
name
</label>