How to Make Entire Custom Checkbox/Div Clickable -- Not Just the Label + Input

Question

I have custom checkboxes I styled like buttons. When you click the label or input the div around it changes color. However, only the label and input are clickable.

Is there a way to make the entire div/button clickable (i.e. everything inside the border)?

Here's my code:

div.label {  
    border:solid 1px gray;
    line-height:40px;
    height:40px;
    width: 250px;
    border-radius:40px;
    -webkit-font-smoothing: antialiased; 
    margin-top:10px;
    font-family:Arial,Helvetica,sans-serif;
    color:gray;
    text-align:center;
}

label {
    display:inline;
    text-align:center;
}

input[type=checkbox] {
    display: none;
}

input:checked + div {
    border: solid 1px red;
    color: #F00;
}

input:checked + div:before {
    content: "\2713";
}

<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<div class="label">
    <label for="lists[Travel]">Travel</label> <br>
</div>

Answer 1

Here's a one way to achieve this:

<div onclick="this.querySelector('input[type=checkbox]').click()">
  <input type="checkbox" style="pointer-events:none">
  <span>Label</span>
</div>

Or if you give the checkbox an id:

<div onclick="abc.click()">
  <input id="abc" type="checkbox" style="pointer-events:none">
  <span>Label</span>
</div>

You need pointer-events:none in this appraoch because otherwise a double-click (causing check and uncheck) happens when you click on the checkbox directly.